display: contents让父容器跳过盒模型生成，子元素直参上层布局；width/height/margin等样式失效，但dom、事件、aria、伪元素保留；表格元素、替换元素及ie全系不支持。
display: contents 会让父容器“不生成盒子”
它不是隐藏容器，而是跳过盒模型生成阶段——width、height、margin、padding、border、background 全部失效，子元素直接参与上一级布局流。DOM 节点、事件监听器、aria- 属性、伪元素（如 ::before）都保留，这点和 display: none 有本质区别。
哪些元素加了 display: contents 也无效？
浏览器会静默降级，不报错也不提示，但实际没效果：
<table>、<code><tr>、<code><td> 等表格元素：规范强制禁止，回退为 <code>display: table或类似值-
<select></select>、<textarea></textarea>、<button></button>、<img>等替换元素：渲染由 UA 控制，无法被contents接管 -
<svg></svg>内部某些元素（如<g></g>）在旧版 Safari 中行为异常，需实测验证 - IE 全系：完全不支持，且无 JS 补丁可模拟
- 原来设置在
.wrapper上的flex-basis、align-self、margin全部丢失 - 如果父容器设了
flex-wrap: wrap，原本被包裹的多个子项可能突然折行或错位 - 视觉上像“布局崩了”，其实是预期行为——中间层已从布局树中剔除
- 用
@supports (display: contents) { ... }包裹现代样式，避免污染 IE 渲染 - 对关键结构（如表单行、列表项），准备两套 DOM：一套含 wrapper（兼容 IE），一套去 wrapper（现代浏览器）
- 特别注意
role="group"或需要键盘导航的区域——IE 下若依赖display: contents实现语义精简，会直接破坏焦点流
flex/grid 容器里加 display: contents 的典型后果
当你在一个 display: flex 父容器中，给某个子 <div class="wrapper"> 设置 <code>display: contents，这个 .wrapper 就不再参与 flex 布局计算，它的子元素会“冒泡”成 flex 容器的直属项目：
必须手动 fallback 的 IE 兼容问题
IE11 及更早版本完全无视 display: contents，连降级提示都没有。不能靠前缀或 JS 模拟补全，必须换方案：
真正难调试的不是样式消失，而是它既“看得见”又“读不到”：DOM 存在、样式失效、语义断连三者叠加，尤其在屏幕阅读器处理不一致时，容易漏掉可访问性断裂点。
