旧浏览器因忽略content-visibility导致布局错乱，需构建时剔除声明+运行时ua检测+ssr默认visible，降级应模拟占位而非简单display:block。
旧浏览器直接忽略content-visibility，但布局已受损
IE 所有版本、Safari ≤ 15.3、Firefox ≤ 124 等环境根本不会解析 content-visibility 声明，CSS 规则被静默丢弃。问题不在于“没生效”，而在于：父容器若同时设置了 overflow: hidden、height 或参与了 Flex/Grid 计算，其子元素一旦被 content-visibility: auto 影响（哪怕只在新浏览器中生效），旧浏览器会因缺失该声明导致整个布局链错位——比如 footer 上浮、sticky 导航失效、滚动条消失。这不是样式未加载，是渲染上下文被破坏。
@supports 只防语法错误，不救已错乱的 DOM
@supports (content-visibility: auto) 能阻止不支持的浏览器读取该规则，但它无法修复以下真实现场：
- SSR 直出 HTML 时，Node.js 环境无 UA，
@supports完全不生效，旧浏览器拿到带content-visibility: auto的 HTML 后直接跳过解析，但父容器的contain-intrinsic-size仍可能被当作普通声明误解析（尤其 Safari 15.3） - Safari 15.3 用户看到页面 footer 上浮，是因为
content-visibility: auto被丢弃，但父容器的height: 0或flex: 1计算逻辑已被干扰 - Firefox 124 用户滚动时滚动条猛缩，是因为
contain-intrinsic-size被忽略，浏览器回退到 0 高度计算，而 DOM 已存在
构建时移除 + 运行时 UA 检测才是真兜底
安全回退不是加个 fallback 样式，而是让旧浏览器压根看不到相关声明：
- 构建阶段用 PostCSS 插件（如
postcss-content-visibility）自动剔除不支持环境下的content-visibility和contain-intrinsic-size声明，生成两套 CSS - 运行时用
navigator.userAgent粗筛关键版本：/Safari\/[\d.]+.*Version\/15\.([0-3]|$)/或/Firefox\/12[0-4]\./，匹配成功后立即执行el.style.contentVisibility = 'visible' - SSR 页面初始 HTML 中默认写
content-visibility: visible，hydration 完成后再按能力升级为auto，避免首屏空白
降级不是 display: block，是重写占位逻辑
很多人把 display: block 当作回退，这是危险操作：
-
content-visibility: hidden保留占位，display: none彻底移除，行为不可互换 - 旧浏览器中，应改用
visibility: hidden+ 手动设置height行内样式模拟占位，例如：el.style.height = '120px' - 对长列表，更可控的方式是用
transform: translateY(-9999px)移出视口 +pointer-events: none，比强行塞content-visibility更稳定 - 若需 SEO 或无障碍支持，降级时必须注入真实高度，不能依赖子元素的
min-height—— 它不会覆盖contain-intrinsic-size的缺失
content-visibility，只要 contain-intrinsic-size 值偏小或用了相对单位，旧版 Chrome（≤121）和 Safari（15.4–16.3）仍会触发高度塌陷——回退逻辑必须覆盖“支持但实现不一致”的中间态。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
