display: contents 在 IE 所有版本中完全不支持，必须用无样式占位容器替代；需设 font-size: 0、min-width: 0 等规则规避塌陷，并避免 JS 移除父节点导致的可访问性与框架冲突问题。
display: contents 在 IE 中完全不生效
display: contents 在 IE 所有版本中均无支持，不是兼容性差的问题，是根本不存在这个特性。它在 Chrome 65+、Firefox 63+、Safari 15.4+ 才稳定可用，Edge 79+（Chromium 内核）才开始支持。如果你的项目仍需兼容 IE11 或更早版本，display: contents 必须被替代方案取代，不能靠前缀或 polyfill 补救。
用空 <div> 占位模拟结构扁平化效果
<p>当目标是让父容器不参与盒模型（比如去掉外边距干扰、避免影响 flex/grid 布局流），又必须兼容 IE，常见做法是用一个无样式、无语义的辅助容器“接住”子元素，并手动调整其 display 和尺寸。实际不是模拟 <code>display: contents 的语义，而是绕过它缺失带来的布局断裂。
实操建议：
- 把原
display: contents的父元素改为<div class="contents-fallback">，保留子元素不动 <li>给该容器设 <code>font-size: 0防止 inline 元素间空白符产生间隙 - 若子元素是 flex 项，确保父容器（即该占位
<div>）设 <code>display: flex，且自身不设 padding/margin - 若子元素需撑高，该占位容器不能设
height: 0或overflow: hidden，否则内容会被裁剪 - IE 默认对 flex 项应用
min-width: auto，而空容器宽度为 0，导致子项无法正常伸展 —— 给占位容器加min-width: 0 - IE 不识别
flex: 1缩写中的flex-basis隐式值 —— 改用完整写法flex: 1 1 0 - 如果占位容器内是纯文本或 inline 元素，IE 可能忽略
white-space: nowrap—— 加font-size: 0后，子元素单独设font-size: 14px - 破坏 DOM 结构语义，影响可访问性（ARIA 属性、屏幕阅读器读取顺序错乱）
- 事件委托失效：原本绑定在占位容器上的事件监听器丢失
- React/Vue 等框架中直接操作 DOM 会与虚拟 DOM 冲突，触发警告甚至渲染异常
- SEO 友好性下降：搜索引擎可能无法正确解析被 JS 拆解的结构层级
Flex/Grid 容器内嵌套时的塌陷风险
IE 对 flex 嵌套的容错率低，尤其当“占位容器”本身是某个 flex 项时，容易因未显式设置 flex-basis 或 min-width 导致高度塌陷或换行异常。
立即学习“前端免费学习笔记（深入）”；
典型错误现象：display: flex 的父容器里放了一个占位 <div>，里面再放两个 <code><span></span>，结果在 IE 中两个 <span></span> 垂直堆叠而非水平排列。
原因和应对：
为什么不用 JavaScript 动态移除父节点？
有人想到用 JS 把占位容器的父节点删掉，只留子元素“上浮”，看似最贴近 display: contents 效果。但实际问题很多：
真正需要结构扁平化的场景，优先走 CSS 占位 + 显式布局控制，而不是 DOM 层面的“外科手术”。IE 的限制虽烦，但强行用 JS 绕开，往往在其他地方埋下更难调试的坑。
IE 兼容的本质不是还原现代 CSS 行为，而是接受它的能力边界，用更可控、更可测的方式达成相同视觉与交互目标。占位容器不是妥协，是明确责任划分：样式归 CSS，结构归 HTML，JS 只在必要时补位。
