display: contents 本质是“掏空父容器”，使其不生成盒模型，子元素直接参与上一级布局流；父元素DOM、事件、ARIA属性、伪元素均保留，但宽高、边框、背景等样式失效。
display: contents 不是“让子元素脱离约束”，而是让父元素自己不生成盒模型——子元素自然就不再受它的盒约束，直接参与上一级布局流。
display: contents 本质是“掏空父容器”，不是隐藏或移除
它和 display: none 完全不同：display: contents 下，父元素 DOM 节点还在，事件监听器、aria- 属性、伪元素（如 ::before）都照常工作；只是它自身不生成任何盒（无宽高、无 margin/padding/border、不占文档流位置）。
- 设了
background、border、padding的父元素加display: contents后，这些样式全部失效 - 子元素的继承属性（如
color、font-size）仍生效，因为继承链没断 - 父元素若原本是
flex或grid容器，加display: contents后，它就不再是容器了——子元素会退回到上一级容器的布局规则里
哪些元素不能用 display: contents？
不是所有 HTML 元素都支持 display: contents。浏览器会静默降级为 display: block 或忽略该声明，常见失效场景：
<table>、<code><tr>、<code><td> 等表格相关元素：规范明确禁止，强制回退 <li> <code><select></select>、<textarea></textarea>、<button></button>等替换元素（replaced elements）：多数浏览器不支持-
<svg></svg>内部某些元素（如<g></g>）在部分旧版 Safari 中行为异常 - IE 全系完全不支持，且无法用 JS 模拟补全——如果项目需兼容 IE，别碰这个值
- 但它们不再继承
.wrapper上设置的flex-basis、align-self等样式——这些只作用于直属项目，不会穿透 - 如果
.wrapper原本有margin或padding，加display: contents后这些也全没了，可能导致视觉错位
和 flex / grid 容器嵌套时的典型陷阱
当你在一个 display: flex 父容器里，给某个子 <div> 设置 <code>display: contents，这个 <div> 就“消失”了，它的子元素会直接成为 flex 容器的直属项目。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>原来 <code><div class="wrapper">
<span>A</span><span>B</span>
</div> 是一个 flex 项目 → 加 display: contents 后，<span>A</span> 和 <span>B</span> 变成两个并列的 flex 项目
可访问性（a11y）风险常被低估
屏幕阅读器对 display: contents 的处理不一致：有的跳过整个父节点（连带其 role 和 aria-label），有的保留语义但打乱父子关系。
- 不要用它包裹
<li>并期望列表语义完整保留——某些读屏器会丢失<ol>/</ol> <ul></ul>的计数逻辑 - 避免在
role="group"或role="region"元素上使用，尤其当内部有焦点管理或键盘导航依赖时 - 真要控制可访问性结构，优先用语义化标签（如
<section></section>、<header></header>）或aria-hidden+ 显式角色标注
真正难的不是写上 display: contents，而是判断父元素是否真的“不需要盒”——它删掉的不只是 padding 和 border，还有布局上下文、视觉隔离、语义边界。一旦嵌套层级深或涉及 a11y，就得手动验证 DOM 结构和渲染结果是否符合预期。
