bootstrap 3 不支持 scroll-margin-top，唯一兼容方案是 :target 伪类配对设置 padding-top 和 margin-top，需作用于带 id 的块级元素，数值应以实际导航栏高度为准。
scroll-margin-top 不适用于 Bootstrap 3
Bootstrap 3 默认不支持 scroll-margin-top，该属性在 Chrome 89+、Firefox 89+、Safari 15.4+ 才稳定可用，而 Bootstrap 3 项目普遍需兼容 IE9–11 和旧版 Safari。强行使用会静默失效，且无降级提示。
真正能用的 CSS 方案只有两个：:target 伪类 + padding-top/margin-top 组合，或直接给 body 加 padding-top（仅解决首屏，不解决锚点跳转）。
-
:target是唯一原生、零 JS、全浏览器兼容（IE9+）的锚点偏移方案 - 必须作用于带
id的块级元素（如<section id="about"></section>或<h2 id="features"></h2>） - 不能写在
body或main上——它只对被激活的目标元素本身生效
:target 方案必须同时设 padding-top 和 margin-top
只加 padding-top 会让目标元素视觉下移，但页面高度增加，导致滚动后“多滚一截”；只加 margin-top 会触发重排，造成点击瞬间页面跳动。二者必须配对使用：
h2[id],
section[id] {
padding-top: 60px;
margin-top: -60px;
}
- 数值 60px 应替换为你实际的导航栏高度（Bootstrap 3 默认
.navbar-fixed-top高度 ≈ 50px，但含 border/padding 后常为 56–64px） - 用 DevTools 检查
document.querySelector('.navbar-fixed-top').offsetHeight，取真实像素值 - 若导航栏响应式变化（如移动端折叠），需配合媒体查询覆盖：
@media (max-width: 767px) { h2[id] { padding-top: 48px; margin-top: -48px; } }
body padding-top 只能解决首屏遮挡，不是锚点解法
Bootstrap 3 的 .navbar-fixed-top 脱离文档流，紧随其后的 <div class="container"> 会顶到视口顶部。此时给 <code>body 加 padding-top 是最简首屏修复手段：
body {
padding-top: 60px;
}
- 它不影响锚点跳转逻辑，只推开头屏内容，让文字不被盖住
- 若你同时用了
:target，body padding-top和:target margin-top会叠加，可能造成首屏留白过大 - 不要用
margin-top替代——它会破坏文档流，导致某些 IE 下 z-index 错乱或 fixed 元素定位异常
为什么不能把 scroll-padding-top 写在 html 或 body 上
即使你在 Bootstrap 3 里手动写了 html { scroll-padding-top: 60px; }，它也大概率不生效：
- IE 和旧版 Edge 完全不支持该属性
- Safari ≤ 15.3（即 iOS 15.2 及更早）忽略
html上的scroll-padding-top - 更关键的是：Bootstrap 3 项目常搭配 jQuery 插件（如 smoothScroll）或自定义 hash 处理逻辑，它们会绕过原生滚动行为，使该 CSS 属性彻底失效
- 如果页面存在
html, body { overflow: hidden; }（常见于模态框或全屏动画），scroll-padding-top会被强制禁用
真正难的不是写哪行 CSS，而是测出那个“刚好不遮、不多留”的像素值——别信 Bootstrap 文档写的 50px，打开 DevTools 看 Computed 面板里的 height，才是真实高度。
