scroll-margin-top 必须写在目标元素上且值严格匹配移动端导航栏视觉总高度；写错位置或算错数值是90%无效的主因，需通过computed面板精确计算height、padding、border和box-shadow垂直扩散，禁用%和em，优先使用px或rem并配合媒体查询响应式适配。
scroll-margin-top 必须写在目标元素上，且值要严格匹配移动端导航栏的视觉总高度——写错位置或算错数值，90% 的“没效果”都源于这两点。
为什么写在 html 或 body 上无效
浏览器锚点跳转时，滚动定位的“吸附主体”是带 id 或 name 的目标元素本身，不是容器。写在 html 上的是 scroll-padding-top，作用对象不同；scroll-margin-top 只对目标元素生效，写在 html、body 或 :target 上会被忽略，尤其在 Safari 和部分安卓 WebView 中完全不触发。
-
html { scroll-margin-top: 48px; }❌ —— html 不是锚点目标，无效 -
:target { scroll-margin-top: 48px; }⚠️ —— Safari 偶现失效，且无法响应不同页面导航高度变化 -
#contact { scroll-margin-top: 48px; }✅ —— 目标明确，稳定生效
怎么算准移动端导航栏的“真实遮挡高度”
不能只看 CSS 里写的 height。固定导航栏在移动端常有折叠、字体缩放、阴影扩散等影响，实际视觉占用空间需叠加计算：
- 打开 DevTools → 选中导航栏 → 查
Computed面板里的height+padding-top+border-top-width（如有）+box-shadow的垂直扩散（可用filter: blur()辅助观察） - 避免用
%或em：该属性基于视口计算，em依赖当前 font-size，缩放时易偏移；px或rem更可控 - 推荐抽成变量：
:root { --nav-height: 48px; }，再写#faq { scroll-margin-top: var(--nav-height); }
响应式切换时别写死数值
桌面端导航高 64px，移动端收起后只剩 48px，硬写 64px 会导致手机端多留白 16px，内容离顶部过远：
- 用媒体查询隔离：
@media (max-width: 768px) { #about, #contact { scroll-margin-top: 48px; } } - 如果导航栏高度由 JS 控制（如折叠动画），不要试图动态改 CSS 变量——
scroll-margin-top不支持运行时重计算，改了也无效 - 遇到
position: sticky导航栏？它滚动中占位高度会变，scroll-margin-top无法响应。优先换成position: fixed，语义清晰、行为可预测
容易被忽略的布局干扰项
即使 scroll-margin-top 写对了，也可能因父容器状态导致定位失真：
- 目标元素父容器内有
float元素且未清除？会导致getBoundingClientRect()返回错误坐标。加display: flow-root到父容器即可修复 - 父容器设了
overflow: hidden或transform（如translateZ(0)）？会切断滚动传播链，使偏移无法传递到根视口 - 目标元素是普通
<div> 但没加 <code>id？浏览器根本不识别为锚点，scroll-margin-top再准也没机会触发——检查生成后的 HTML 源码，确认id存在且合法（无空格、中文、重复）
