scroll-margin-top必须加在目标锚点元素（如section#faq、h2[id]）上，而非body或nav；其值须严格等于导航栏视觉总高度（含padding、border、box-shadow及安全区），并配合css变量与媒体查询适配响应式场景。
scroll-margin-top 必须加在目标元素上，不是 body 或导航栏
移动端锚点跳转后内容被 fixed 导航栏盖住，根本原因不是“没留空”，而是浏览器把目标元素的盒模型上边缘对齐到视口顶部（y=0），完全不感知 fixed 元素存在。所以不能给 body 或 nav 加 scroll-margin-top——它只对被跳转的目标生效，比如 section#faq、h2[id] 或 div#contact。
常见错误写法：body { scroll-margin-top: 48px; } ❌ —— body 不是锚点目标，无效nav { scroll-margin-top: 48px; } ❌ —— 导航栏不是被跳转对象，写了也白写
正确做法是直接定位到可跳转的元素，例如：
h2[id] {
scroll-margin-top: var(--nav-height);
}
这样每个带 id 的 <h2></h2> 都能精准避让，且不干扰其他样式。
值必须等于导航栏的视觉总高度，不能只看 height
移动端导航栏常因折叠、字体缩放或安全区（env(safe-area-inset-top)）导致实际遮挡高度 ≠ CSS 中写的 height。只设 scroll-margin-top: 48px 很容易漏掉 padding-top: 12px 或 border-top-width: 2px，最终仍被遮。
- 用 DevTools 的 Computed 面板查导航栏「实际占用高度」最准，包括：
height+padding-top+border-top-width+box-shadow向上扩散部分 - 移动端常需叠加安全区：例如
scroll-margin-top: calc(var(--nav-height) + env(safe-area-inset-top)); - 避免用
%或em：它们依赖视口宽度或字体大小，和垂直遮挡无关，极易错位
响应式高度变化时，别硬写像素值
桌面端导航栏可能是 64px，移动端折叠后变成 48px，写死一个值会导致一端留白、另一端遮挡。CSS 变量 + 媒体查询是最稳组合：
:root {
--nav-height: 64px;
}
@media (max-width: 768px) {
:root {
--nav-height: 48px;
}
}
h2[id], section[id] {
scroll-margin-top: var(--nav-height);
}
注意：scroll-margin-top 不继承，也不支持通配符，每个需要避让的目标都得显式声明；如果只有一小部分标题要处理（比如仅 <h2></h2>），就不要全局污染所有 section。
移动端 Safari 15.4+ 才完整支持，旧版需降级
虽然 scroll-margin-top 在 Chrome 105+、Firefox 106+ 已稳定，但 iOS Safari 直到 15.4 才开始可靠支持。15.3 及更早版本会直接忽略该属性，导致锚点跳转后内容被盖住。
降级方案不是靠 JS 动态改 scroll-margin-top（它不支持运行时重计算），而是：
- 用
padding-top+margin-top: -Xpx组合预留空间，数值严格相等，且目标不能是inline或flex元素 - 监听
hashchange或路由就绪后，手动调用element.scrollIntoView({ block: 'start', behavior: 'smooth' })，并确保 DOM 已挂载 - 若目标元素异步渲染（如 React/Vue 组件），必须等
ref或nextTick就绪后再调用，否则找不到元素
真正难的不是写对一行 CSS，而是确认那个 --nav-height 在所有设备、所有状态下的视觉高度是否真实一致——这往往需要真机调试，而不是仅靠模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
