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 class="aritcle_card flexRow artxards">
  											<div class="artcardd flexRow">
  												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
  														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
  												<div class="aritcle_card_info flexColumn">
  													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
  													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
  												</div>
  												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
  												</a>
  											</div>
  										</div>
    </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></nav> 上本应有效，但 Safari 会因 display: contents 中断导航树连接。正确做法是：

  • 把 aria-label 显式保留在 <nav></nav> 上（不删）
  • 给 ssr-wrapper 加 aria-hidden="true"，明确告诉读屏器忽略它
  • 确保所有 <a></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></h1> 被包在 display: contents 的 <div> 里，浏览器解析到该 <code><div> 时跳过生成盒模型，导致文本无法进入首屏渲染队列。<p>关键原则：所有首屏可见文本（<code><h1></h1>、<p></p>、<button></button>）必须是 的直系子元素，或最多嵌套 2–3 层语义明确的原生标签（如 <main><header><h1></h1></header></main>），严禁用 display: contents 包裹它们。

  • 禁用 display: contents 在 直接子级使用，尤其不要套在 <main></main>、<header></header> 外层
  • <h1 lang="zh-CN"></h1> 必须裸写，不嵌套无语义 <div class="title-wrapper"> <li>SSR 渲染时若框架自动注入 wrapper，需在构建阶段用插件剥离，或用 <code>dangerouslySetInnerHTML 类机制绕过

  真正难的不是写对 display: contents，而是判断它该不该出现在 DOM 里——多数时候，删掉比补救更可靠。