Safari 中 display: contents 会破坏语义链，导致 VoiceOver 跳过内容、aria-label 失效、表格/列表结构不可见；应改用 flex/grid 布局并保留语义容器，首屏文本严禁被其包裹。
display: contents 会破坏 Safari 的语义链
它在 Safari（iOS/macOS）中不是“视觉隐藏”，而是直接剥离父元素的语义上下文。哪怕你写了 role="list"、aria-label 或 <ul></ul> 标签，只要加了 display: contents，VoiceOver 就大概率跳过整块内容——DOM 节点还在，el.getAttribute('aria-label') 也能取到值，但语义树里已断开。
这不是兼容性缺失，而是 Safari 对该属性的语义处理更激进。2026 年最新实测（iOS 16.7 / Safari 16.6）仍存在，且在 <label></label>、<legend></legend>、<caption></caption> 上失效更彻底。
-
role="list"+display: contents→ VoiceOver 不报“列表”，也不数项数 <div role="group" aria-label="筛选条件"> 包着 <code><input>和<button></button>→ 加了display: contents后，aria-label 完全静音，键盘 Tab 无法将二者归入同一语义区域<table role="table"> 套 <code>display: contents→ 表格行列结构对读屏器不可见，但视觉渲染正常用 flex/grid 替代 display: contents 打平布局
目标是“视觉上打平嵌套”，但必须保留语义锚点。最稳妥的方式是放弃
display: contents，改用display: flex或display: grid让子元素直接受控于父容器，同时不丢失语义容器。例如原本这样写：
立即学习“前端免费学习笔记（深入）”；
<section class="card"> <div class="wrapper" style="display: contents"> <h2>标题</h2> <p>正文</p> </div> </section>应改为：
<section class="card"> <div class="wrapper"> <h2>标题</h2> <p>正文</p> </div> </section>并配 CSS：
.card { display: flex; flex-direction: column; } .wrapper { display: contents; } /* ❌ 删掉这行 */ /* 改为： */ .card > .wrapper { display: flex; flex-direction: column; gap: 8px; } /* 或直接去掉 .wrapper，让 h2/p 成为 .card 的直系子元素 */- 若需响应式列布局，用
display: grid+grid-template-columns，而非靠display: contents把<ul></ul>“变”成 flex 项目 -
display: flex和display: grid在 iOS 14+ 全面支持，无障碍表现稳定 - 避免用
display: contents包裹<label></label>或<button></button>—— 这些原生语义标签一旦被剥离，触控和键盘焦点都会断裂
必须用 display: contents 时的语义补救策略
仅限 SSR 框架注入 wrapper、或第三方组件强制包裹等不可控场景。此时不能依赖中间层承载语义，而要把关键信息上提到真实存在的父级元素上，并用
aria-hidden="true"隔离干扰节点。比如服务端返回：
<nav aria-label="主导航"> <div class="ssr-wrapper" style="display: contents"> <a href="/home">首页</a> <a href="/about">关于</a> </div> </nav>问题在于
ssr-wrapper无语义，aria-label挂在<nav>上本应有效，但 Safari 会因display: contents中断导航树连接。正确做法是：- 把
aria-label显式保留在<nav>上（不删） - 给
ssr-wrapper加aria-hidden="true"，明确告诉读屏器忽略它 - 确保所有
<a>都有可访问文本，不依赖父级 aria-label 传递上下文
更安全的写法：
<nav aria-label="主导航"> <div class="ssr-wrapper" aria-hidden="true" style="display: contents"> <a href="/home" aria-current="page">首页</a> <a href="/about">关于</a> </div> </nav>移动端首屏文本必须绕过 display: contents
弱网下文本不显示，常被误判为 JS 或 CSS 加载慢，实际是 HTML 解析流被阻断：
<h1>被包在display: contents的<div>里，浏览器解析到该<div>时跳过生成盒模型，导致文本无法进入首屏渲染队列。关键原则：所有首屏可见文本（
<h1>、<p>、<button>）必须是<body>的直系子元素，或最多嵌套 2–3 层语义明确的原生标签（如<main><header><h1>），严禁用display: contents包裹它们。- 禁用
display: contents在<body>直接子级使用，尤其不要套在<main>、<header>外层 -
<h1 lang="zh-CN">必须裸写，不嵌套无语义<div class="title-wrapper"> - SSR 渲染时若框架自动注入 wrapper，需在构建阶段用插件剥离，或用
dangerouslySetInnerHTML类机制绕过
真正难的不是写对
display: contents，而是判断它该不该出现在 DOM 里——多数时候，删掉比补救更可靠。- 若需响应式列布局，用
