caption-side: bottom 有时无效，主因是caption未作为table的第一个子元素、旧版IE及PDF生成器兼容性差、CSS权重或继承干扰导致标题未被正确识别或错位。
caption-side: bottom 能把表格标题放到底部，但不是所有浏览器都按你预期渲染——尤其在旧版 IE 或某些 PDF 生成器里，它可能被忽略、错位，甚至完全不生效。
为什么 caption-side: bottom 有时没反应
最常见原因是 caption 标签没放在正确位置：它必须是 <table> 的第一个子元素，不能塞进 <thead> 里，也不能放在 <table> 外面当普通标题用。浏览器即使“显示”了文字，也可能不把它当语义化标题处理，caption-side 就失去作用对象。
另一个隐蔽问题是 CSS 选择器权重或继承干扰。比如父容器设了 text-align: left，而你只写了 caption { caption-side: bottom; }，没重置对齐方式，结果标题文字挤在左下角，误以为“没动”。
- 检查 DOM 结构：
<table><caption>xxx</caption><thead>... - 避免用
<h2>或<p>模拟标题——屏幕阅读器不会识别为表格标题 - 如果用了 CSS 预处理器（如 Sass），确认编译后生成的 CSS 确实包含
caption-side: bottom，而不是被条件编译剔除了
caption-side 的兼容性底线在哪
caption-side: top 和 bottom 在 Chrome 4+、Firefox 2+、Safari 3.1+、Opera 9+、Edge 和 IE8+ 都支持，但 IE7 及更早版本完全不认这个属性，只能靠 <caption align="bottom">（HTML4 属性，已废弃但部分旧环境仍可用）。
立即学习“前端免费学习笔记（深入）”；
真正容易翻车的是 PDF 渲染场景：dompdf 2.x 对 bottom 支持不稳定，某些版本会把标题画到表格下方很远的位置；mPDF 8+ 相对可靠，但仍建议导出后人工核对。
- 生产环境若需兼容 IE7–IE8，得准备降级方案，比如用
display: table-footer-group+ 伪元素模拟底部标题（语义弱但视觉可达） - left/right 值仅 Firefox 原生支持，Chrome/Safari 不识别，不要在跨浏览器项目中依赖它们
- 移动端 WebView（如微信内置浏览器）基本等同于对应 Android/iOS 系统的 Chrome/Safari 版本，可按主流浏览器兼容表判断
怎么让底部标题真正居中且不跑偏
只设 caption-side: bottom 不够，因为 caption 默认水平居中是 CSS 规范强制行为，但一旦你给父 <table> 设了 text-align: left，这个居中就会失效——除非显式重写 caption 的 text-align。
正确写法是组合控制：
caption {
caption-side: bottom;
text-align: center;
}
如果要左对齐底部标题，必须同时写：
caption {
caption-side: bottom;
text-align: left;
}
- 不要指望
vertical-align控制标题上下微调——它对caption无效，那是给单元格内容用的 - 想加间距？用
margin-top或margin-bottom，但注意：IE8–IE10 下margin在caption上表现异常，稳妥做法是给<table>加padding-bottom -
caption不支持colspan，别试图用它跨列拉伸；需要复杂布局，改用<div role="table">+ ARIA，但那就脱离原生表格语义了
真正麻烦的从来不是写那行 caption-side: bottom，而是确认它在所有目标环境里都被解析、被尊重、不被其他样式劫持——尤其是当表格嵌在 CMS 模板或第三方组件里时，外层 CSS 很可能悄悄覆盖了你的规则。
