display: contents 在 IE 所有版本、Edge ≤18、Safari ≤15.3、Firefox ≤63 中完全不支持，解析器直接忽略该声明；应改用 display: flex/grid 替代，或通过语义上提、空 wrapper 等方式降级处理。
display: contents 在老浏览器里根本不存在
IE 所有版本、Edge ≤18、Safari ≤15.3、Firefox ≤63 都不支持 display: contents。它不是“表现不稳定”，而是解析器直接跳过该声明，等同于没写。你在 DevTools 里看不到它被划掉，是因为浏览器压根没认出这个值——连语法错误都不会报。
用 display: flex 或 display: grid 替代最稳妥
多数人用 display: contents 是为了“去掉父容器盒模型干扰”，比如让 <ul></ul> 下的 <li> 直接成为 flex 项目。这完全可以用更兼容的方式实现：
-
<ul class="list-flex">...</ul>，然后写.list-flex { display: flex; flex-direction: column; } - 子元素（
<li>）自动成为 flex 项，无需依赖父元素“消失” - 语义完整保留：
<ul></ul>仍被屏幕阅读器识别为列表，role和aria-label不会断链 - 动画、事件委托、CSS 选择器都按预期工作，没有 Firefox 的
animationend失效问题
必须保留 DOM 结构时，用空 wrapper + 语义上提
SSR 场景或组件库中无法改 HTML 结构时，不能硬套 display: contents，而应主动降级：
- 把原容器设为
aria-hidden="true"，并加一个无内容的<div class="visually-hidden"></div> - 将关键语义（如
aria-label、role="list"）移到它真实存在的父级上，比如<section aria-label="导航菜单"></section> - 避免在
<label></label>、<table>、<code><caption></caption>这类强语义标签上尝试任何替代，Safari 会直接跳过整条语义链 - 若需占位又不想渲染，用
font-size: 0+line-height: 0控制空白符撑开，别用height: 0或overflow: hidden
@supports 对 display: contents 降级基本无效
@supports (display: contents) 在 Safari 15.3、Firefox 62 等环境中本身就不被识别，整块规则会被忽略。更麻烦的是：即使检测通过，也无法补救已发生的语义剥离或动画丢失——这些是渲染层行为，不是样式开关能控制的。
立即学习“前端免费学习笔记（深入）”；
真正可控的路径只有两条：构建时用 PostCSS 插件根据 .browserslistrc 自动剔除不支持环境下的 display: contents 声明；或运行时用 navigator.userAgent 粗筛（例如匹配 /Safari\/[\d.]+.*Version\/15\.([0-3]|$)/），再手动设 el.style.display = 'flex'。
