display: contents让父元素退出布局计算，子元素直挂上一级容器；适用于vue/react列表包装、表单行包装及ssr匿名div；不支持表格、替换元素及ie全系。
display: contents 不是“隐藏父元素”，而是让父元素彻底退出布局计算——子元素直接挂到上一级容器的布局流里。它能有效打平无意义的嵌套 wrapper，尤其适合响应式中被框架或模板强行注入的 div、span 或语义化但非布局必需的标签。
哪些嵌套结构加 display: contents 最立竿见影
常见于以下三类场景，加了就少一层盒模型干扰：
- Vue/React 中
v-for或.map()返回多个节点时，硬套的<div class="list-item-wrapper"><li>表单每组 <code><label></label>+<input>外包的<div class="form-row">，导致 Grid/Flex 无法跨行对齐<li>SSR 或微前端注入的带 <code>data-v-xxx的匿名div，DOM 不能删但又不想它参与 flex 项目计数 <table>、<code><tr>、<code><td> 等表格相关元素 —— 规范禁止，强制回退<li> <code><select></select>、<button></button>、<textarea></textarea>等替换元素（replaced elements）—— 多数浏览器不支持，可能失焦或样式断裂-
<form></form>—— 加了之后内部控件可能无法提交，或submit事件捕获异常 - IE 全系完全不支持，且无 polyfill 可补 —— 若项目仍需兼容 IE11，这条路直接堵死
这些 wrapper 通常只起组织作用，不承载样式或交互逻辑，正是 display: contents 的理想目标。
display: contents 和 display: none 的关键区别
这是最容易混淆的点：加了 display: contents 后，父元素在 DOM 树里还在，JS 能正常查到、事件能正常触发、aria-label 照样生效；但它的 padding、border、background、height 全部失效，getComputedStyle(el).height 会返回 auto。
而 display: none 是连渲染树都剔除，子元素也跟着不可见、不可交互、不可聚焦。
所以如果你需要保留可访问性（比如 screen reader 仍要读出 ul 的列表语义），但又想让 li 直接成为父级 flex 容器的项目，那就必须用 display: contents，而不是 display: none 或 visibility: hidden。
哪些元素加了会静默失效或引发错位
不是所有标签都能安全使用 display: contents，浏览器会直接忽略或降级为 display: block：
Safari 15.4+、Chrome 65+、Firefox 63+、Edge 79+ 支持良好，但 Safari 15.3 及更早版本对 display: contents 在 <svg></svg> 内的 <g></g> 上行为不稳定，慎用。
和 Flex/Grid 嵌套时的样式穿透陷阱
当父容器是 display: flex，你给某个子 <div class="wrapper"> 加了 <code>display: contents，它的子元素会变成 flex 容器的直属项目 —— 但它们不再继承 .wrapper 上设置的 flex-basis、align-self、margin 等样式。
例如：
.wrapper {
display: contents;
flex-basis: 200px; /* 这行完全无效 */
margin: 10px; /* 这行也失效 */
}
.wrapper > span {
align-self: center; /* 这个也不会生效，因为 span 已不是 .wrapper 的 flex 项目 */
}
真正起作用的是父 flex 容器对这些新晋直属项目的统一控制，比如 justify-content 或直接给 span 加 margin。这点容易被忽略，调试时发现“样式没生效”，其实是选择器层级失效了。
