scroll-margin 在 safari ≤15.3、ie、旧 edge、android 4.x 及微信 x5 中完全不被识别，需用 js 回退：先校验目标元素存在且可见，再通过 getboundingclientrect() 计算偏移后调用 scrollto({ top, behavior: 'smooth' })，并做好防抖和容器上下文检查。
scroll-margin 在 IE、旧 Edge、Android 4.x、Safari ≤15.3 及多数微信 X5 内核中完全不被识别——不是“表现异常”，是浏览器解析时直接跳过整条规则，连 fallback 都不会触发。
为什么 scroll-margin 在 Safari 15.3 及更早版本里没反应
这不是写法或选择器的问题。Safari 直到 15.4（2022 年 3 月发布）才开始支持该属性，而大量存量 iOS 设备仍运行 15.3 或更低系统；微信内置浏览器（X5 内核）至今未启用该特性，写了也静默忽略。
- 检查方式：打开 Safari 开发者工具 → 选中目标元素（如
#about）→ 查看 Computed 面板中是否有scroll-margin-top值；若为空或显示为auto，说明不支持 - 注意：
scroll-margin是复合属性（scroll-margin: 1rem;等价于四边分别设），但旧浏览器连单边形式（如scroll-margin-top）都不认识 - 别用
@supports (scroll-margin-top: 0)包裹——IE11 和旧 Edge 连@supports语法都不解析，整块 CSS 被丢弃
scroll-margin-top 的 JS 回退必须作用于目标元素本身
原生失效后，不能靠 CSS 模拟，得用 JS 手动控制滚动终点位置。关键点在于：偏移逻辑必须绑定到带 id 的锚点元素，而不是全局容器。
- 先确认目标存在且可见：
const el = document.getElementById('faq');且el && el.offsetParent !== null - 计算真实滚动位置：
const top = el.getBoundingClientRect().top + window.scrollY - 64;（64 是导航栏视觉总高度） - 用
window.scrollTo({ top, behavior: 'smooth' })，但需检测支持：'scrollBehavior' in document.documentElement.style不够，应结合typeof window.scrollTo === 'function'和实际调用验证 - 防抖必须做：同一目标多次触发时，清除前一个
requestAnimationFrameID，否则动画堆叠、定位错乱
哪些写法看似兼容实则危险
很多“降级方案”在旧浏览器里反而引入新问题，尤其当页面已用现代布局机制时。
-
body { scroll-margin-top: 64px; }❌ ——scroll-margin不作用于body，它只对带id的可定位目标生效，写在这里纯属无效代码 - 用
margin-top: -64px+padding-top: 64px模拟 ❌ —— 会破坏文档流，影响getBoundingClientRect()计算，导致 JS 回退也错位 - 把
scroll-margin-top和scroll-padding-top同时设在不同层级 ✅→❌ —— 旧浏览器虽都忽略，但现代浏览器会叠加生效，造成双倍偏移 - 父容器用了
overflow: hidden或transform: translateZ(0)❌ —— 即使 JS 回退也拿不到正确top值，因为getBoundingClientRect()返回的是相对于父容器的坐标
真正落地时，最常被忽略的是：目标元素是否真有合法 id（CMS 可能自动剥离或转义）、导航栏高度是否包含 padding 和 border、以及父容器是否意外截断了滚动上下文——这些细节比属性本身是否支持更决定成败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
