display: contents 让容器不生成盒模型，子元素直接参与父级布局流，但 ie 全系不支持且无法模拟；它不是隐藏而是“掏空”，保留子元素、事件、aria 等，但跳过自身盒生成。
直接说结论：display: contents 能让容器“不生成盒子”，子元素会像它不存在一样，直接参与父容器的布局流——但它在 IE 所有版本中完全不支持，且不能靠前缀或 JS 模拟补全。
为什么 display: contents 不是“隐藏”，而是“掏空”
它和 display: none、visibility: hidden 本质不同：display: contents 不移除元素，也不隐藏内容，只是跳过该元素的盒模型生成（无宽高、无 margin/padding/border、不占文档流位置），但它的子元素、伪元素（如 ::before）、事件监听器、ARIA 属性全部保留并照常工作。
常见误用场景：
- 想用它替代
display: none做条件显示 → 错，子元素仍渲染，布局会突变 - 给
<table> 或 <code><select></select>设display: contents→ 失效，部分替换型元素（replaced elements）和表格相关元素不支持该值 - 依赖它修复可访问性 → 风险高，屏幕阅读器对
contents的处理不一致，尤其嵌套role时可能跳过语义
display: contents 在现代浏览器中的典型写法
核心是“父容器设 display: contents，子元素自动升维”。例如：
<nav class="nav-wrapper"><ul class="nav-list">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
</ul></nav>
若希望 <ul></ul> 不产生默认列表样式、不干扰 <nav></nav> 的 flex 布局，可：
.nav-wrapper {
display: flex;
}
.nav-list {
display: contents;
}
此时两个 <li> 直接成为 <nav></nav> 的 flex 项目，不再受 <ul></ul> 的块级盒约束。
注意点：
-
display: contents无法继承，必须显式设置在目标容器上 - 选择器如
.nav-list li依然有效；但.nav-list > *会匹配失败（因为.nav-list没有渲染盒，“>” 失去父级上下文） - 动画无法作用于
display: contents元素本身（它没盒，也就没可动画属性）
IE11 及更老浏览器的 fallback 方案
IE 完全无视 display: contents，连降级提示都没有。必须用 DOM 结构+CSS 组合绕过：
- 把原容器换成带类名的
<div class="contents-fallback"> <li>设 <code>font-size: 0防止 inline 子元素间空白符产生间隙 - 若父容器是
display: flex，则该占位<div> 必须也设 <code>display: flex，且加min-width: 0（IE 对空 flex 项默认min-width: auto，导致塌陷） - 子元素需重置字体、行高、垂直对齐等被
font-size: 0影响的属性
示例：
.contents-fallback {
display: flex;
font-size: 0;
min-width: 0;
}
.contents-fallback > * {
font-size: 14px;
line-height: 1.5;
}
容易被忽略的边界问题
最麻烦的不是写法，而是它对布局上下文的“静默劫持”：
- 当父容器是 Grid 时，
display: contents的子元素会变成 grid item，但它们的grid-area、justify-self等属性可能失效，因父级 grid 容器不“认识”这些突然冒出来的子项 - 使用 CSS-in-JS（如 Emotion）时，动态插入的
display: contents规则可能被 SSR 渲染忽略，导致首屏布局错乱 - DevTools 中该元素仍可见，但 computed 样式里 width/height/margin 全为 0，容易误判为“样式没生效”
真正要用好它，得先确认：你是否真的需要语义保留 + 布局透传，而不是简单删掉那个 wrapper？如果只是临时隐藏，display: none 更安全；如果结构可改，直接扁平化 HTML 往往比硬套 contents 更可靠。
