直接移除 display: contents 是唯一可靠解法，因旧版 firefox（≤124）将其视为非渲染节点，导致动画、事件及子元素网格上下文全部丢失；替代方案应保留语义与可访问性，如用 font-size: 0 的空 div 或 flex/grid + gap 实现视觉扁平化。
直接移除 display: contents 是唯一可靠解法，不是“兼容性差”，而是 Firefox（尤其 ≤124 版）将其视为非渲染节点，导致动画、事件、子元素网格上下文全部丢失。
为什么 display: contents 在旧版 Firefox 中会彻底失效
Firefox 把 display: contents 元素从渲染树中完全剥离——它不占盒、不参与层叠、不触发重排，连子元素的动画上下文和 animationend 事件监听都收不到。这不是样式没生效，是整个节点被引擎“跳过”了。
- DevTools 的 Elements 面板里能看到该元素，但 Computed 标签页中
display值为空或显示为none - 用
getComputedStyle(el).display检查，返回值常是""或"none"，而非"contents" - 子元素若依赖父级 grid 容器定义的
grid-template-columns，此时subgrid直接不工作
别试 polyfill 或 JS 模拟
试图用 JS 动态替换 DOM 节点、或加 visibility: hidden + position: absolute 来“模拟” display: contents，只会引入新问题：
- ARIA 属性（如
aria-labelledby）无法透传给子元素，屏幕阅读器顺序错乱 - React/Vue 的 hydration 会失败：服务端渲染出真实 DOM，客户端却试图挂载到已“消失”的父节点上
- 事件委托链断裂——
document.addEventListener('click', ...)无法捕获子元素冒泡事件 - IE11 及所有旧版 Firefox 对
display: contents完全无定义，加-ms-或-moz-前缀毫无意义
真正可用的替代方案
目标不是“假装没有容器”，而是让容器不干扰布局又保留语义和可访问性：
- 用空
<div class="contents-fallback"></div>替代，设font-size: 0消除 inline 子元素间空白符撑开的间隙 - 若该容器是 flex 项，必须加
min-width: 0（IE/Firefox 默认min-width: auto会导致塌陷） - 避免
height: 0或overflow: hidden—— 否则子内容会被裁剪 - 多数场景下，
display: flex或display: grid加gap和place-items就能实现相同视觉扁平化效果，且兼容性好得多
最易被忽略的一点：即使你只在现代浏览器中用 display: contents，只要父容器同时用了 content-visibility: auto 或 overflow: hidden，Firefox 就可能提前剪掉整个渲染路径——不要依赖“我只在支持的环境里用”这种假设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
