caption-side必须写在table元素上而非caption上，且caption须为table第一个子元素；bottom值需标准doctype支持，ie8+兼容，left/right非标准；对齐需单独设置caption的text-align。
caption-side必须写在table上，不是caption上
很多人写成 caption { caption-side: bottom; }，浏览器直接忽略——这个属性只作用于 table 元素本身，用来告诉浏览器“这个表格的标题该放哪”。
✅ 正确写法：table { caption-side: bottom; } 或更稳妥的 table.my-table { caption-side: bottom; }
❌ 错误写法：caption { caption-side: bottom; }、thead caption { ... }、用 margin-top 或 position: relative 手动推 caption
⚠️ 如果用了 Sass/Less，检查编译后 CSS 是否真包含该规则——条件编译或作用域错误常导致它被悄悄剔除
caption必须是table的第一个子元素
caption-side 不是“视觉定位”，而是语义绑定。浏览器只认结构上属于表格的 caption，否则它只是普通文本块。
✅ 正确 DOM 结构：<table>
<caption>销售汇总</caption>
<thead>...</thead>
<tbody>...</tbody>
</table>
❌ 常见错误结构：
-
<table><thead><caption>...</caption></thead></table>（塞进thead） -
<caption>...</caption> <table>...</table>（放 table 外面） -
<table><div><caption>...</caption></div></table>（包在div里）
⚠️ 即使视觉上显示正常，屏幕阅读器和 SEO 也会失效；PDF 渲染器（如 dompdf）更可能完全忽略该 caption
bottom值兼容性底线：IE8+、标准DOCTYPE、不支持left/right
caption-side: bottom 在 Chrome 4+、Firefox 2+、Safari 3.1+、Edge 和 IE8+ 中可用，但有硬约束：
✅ 必须声明标准 DOCTYPE： —— IE8 若进入怪异模式，该属性彻底失效
❌ left 和 right 是非标准值，仅 Firefox 偶尔支持，Chrome/Safari/Edge 全部忽略，生产环境禁用
⚠️ IE7 及更早版本完全不识别 caption-side，只能降级用废弃的 <caption align="bottom"></caption>，但语义弱、不可访问
⚠️ PDF 生成器中问题集中：dompdf 2.x 渲染 bottom 易偏移很远；mPDF 8+ 相对可靠，仍需导出后人工核对
标题到底部了却不对齐？text-align要显式设在caption上
caption-side: bottom 只控制上下位置，不控制左右对齐。默认居中是规范强制行为，但不会继承 table 的 text-align。
✅ 底部居中：table { caption-side: bottom; } caption { text-align: center; }
✅ 底部左对齐：table { caption-side: bottom; } caption { text-align: left; }
⚠️ 如果只给 table 设了 text-align: left，又没重置 caption 的对齐方式，文字会挤在左下角，容易误判为“没生效”
⚠️ 某些旧版 Safari 对继承行为异常，显式设置 caption { text-align: ... } 是最稳妥做法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
