content-visibility:auto 锚点偏移的根本原因是未设置 contain-intrinsic-size 导致布局信息缺失，使 getboundingclientrect() 返回错误 top 值；必须为所有启用 content-visibility: auto 的元素显式设置 contain-intrinsic-size，且需逐级检查祖先元素，否则 scroll-margin-top 失效。
content-visibility:auto 触发锚点跳转后定位偏移
根本原因不是 content-visibility 本身“错”，而是它默认不预留占位高度，导致浏览器滚动时把目标元素当成了“尚未渲染”的状态，getBoundingClientRect() 返回的 top 值为 0 或负值——尤其在首次跳转、或目标元素刚进入视口时。这不是视觉遮挡，是布局信息缺失引发的定位计算失效。
contain-intrinsic-size 是必须显式设置的补偿值
content-visibility: auto 要真正“可预测”，必须配 contain-intrinsic-size，否则浏览器无法预估该元素未渲染时应占多高，锚点滚动就会卡在顶部或错位。这个值不是可选优化项，而是锚点功能正常工作的前提。
- 写法必须是：
contain-intrinsic-size: 500px（单值）或contain-intrinsic-size: 500px / 300px（宽/高），不能用auto或unset - 数值建议取该容器常见内容高度的保守估计（比如长文区块设
1200px，卡片列表设800px），宁大勿小 - 若内容高度波动极大（如含动态图片加载），可用 JS 在图片加载后更新
style.containIntrinsicSize，但首次跳转仍依赖 CSS 初始值
scroll-margin-top 在 content-visibility 下需双重校验
即使加了 contain-intrinsic-size，scroll-margin-top 也可能失效——因为该属性只对“已知尺寸”的元素生效。如果目标元素的父级也用了 content-visibility: auto 且没设 contain-intrinsic-size，它的高度仍是未知的，子元素的偏移就无从计算。
- 检查路径：锚点元素 → 其所有带
content-visibility: auto的祖先 → 每一级都必须有contain-intrinsic-size - 避免嵌套：不要在
.section-wrapper和其子.content上同时启用content-visibility: auto，除非两级都配了 intrinsic 尺寸 - 调试技巧：在 DevTools 中临时删掉
content-visibility，确认锚点能准确定位；再逐级加回并补全contain-intrinsic-size，观察哪一级引入偏差
兼容性与降级场景中容易被忽略的细节
contain-intrinsic-size 在 Chrome 95+、Firefox 93+、Safari 15.4+ 才被支持；旧版浏览器会直接忽略该声明，导致 content-visibility: auto 退化为“完全不渲染”，锚点彻底失效。这不是渐进增强，是功能断裂。
- 不要依赖
@supports (contain-intrinsic-size: 1px)做条件加载——它无法覆盖 Safari 15.3 及更早版本的“解析但不执行”行为 - 真实可行的降级方案：对关键锚点区域（如导航跳转目标），放弃
content-visibility，改用visibility: hidden+scroll-margin-top组合 - 最隐蔽的坑：CSS 预处理器（如 Sass）里用变量生成
contain-intrinsic-size，若变量为空或未定义，输出的是无效声明，浏览器静默忽略，毫无报错提示
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
