caption必须作为table的第一个子元素，否则语义失效、屏幕阅读器可能跳过或误读；若出现在thead或tbody之后，会被视为普通文本节点，失去“表格标题”身份，chrome+jaws组合下错位caption完全不被朗读。

<caption></caption> 必须作为 <table> 的第一个子元素，否则语义失效、屏幕阅读器可能跳过或误读——这不是样式问题，是结构硬约束。 <h3>为什么<code><caption></caption>不能放在<thead>后面？ <p>浏览器和辅助技术（如 NVDA、VoiceOver）依赖 DOM 顺序解析表格语义。<code><caption></caption> 若出现在 <thead> 或 <code><tbody> 之后，会被视为普通文本节点，失去“表格标题”身份。实测 Chrome + JAWS 组合下，错位的 <code><caption></caption> 完全不被朗读。

• 正确位置：<table> <caption>...</caption> <thead>...</thead>...</table>
• 常见错误：把 <caption></caption> 当成视觉装饰，塞在 <table> 外面用 <code><div> 包裹 <li>验证方式：用浏览器开发者工具检查 DOM 结构，确认 <code><caption></caption> 是 <table> 的直接且首个子节点 <h3> <code>caption-side 在不同浏览器中的兼容性差异

  caption-side: bottom 基本无兼容问题，但 left 和 right 在旧版 Safari（≤15.6）和部分 Android WebView 中不生效，会回退到 top。Firefox 对 caption-side: right 的对齐逻辑也与其他浏览器略有不同（文字基线对齐方式不一致）。

  

  html-ppt-to-pdf

  将使用 `

  ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

  下载
  • 安全写法：caption { caption-side: bottom; text-align: right; }（用 text-align 补位）
  • 避免单独依赖 caption-side: left 做关键布局
  • 如需左/右标题，建议改用 CSS Grid 或 Flex 模拟结构，而非强依赖 caption-side

  如何让<caption></caption>支持换行与复杂内联样式？

  <caption></caption> 是替换元素（replaced element），默认不支持 display: inline-block 或 flex，但可嵌套 <span></span> 实现局部样式控制。直接在 <caption></caption> 上设 white-space: pre-line 可保留换行符，但需注意父级 <table> 的 <code>width 会影响折行位置。

  • 换行示例：

    <caption>2024年度<br>用户行为分析报告</caption>

    + caption { white-space: pre-line; }
  • 高亮关键词：<caption>订单状态：<span style="color:red">待发货</span> </caption>
  • 禁用项：不要给 <caption></caption> 设 float 或 position: absolute，会导致可访问性信息丢失

  最易被忽略的一点：即使你只用 <caption></caption> 写了“销售数据”，它也已承担起语义责任——搜索引擎会把它当作表格内容摘要，屏幕阅读器会优先播报。别为了省事用 <h3></h3> 替代，那等于主动放弃可访问性基础。