caption-side:bottom 未生效是因为<caption>未作为<table>的第一个子元素，CSS规范强制要求其必须紧贴<table>开始标签，否则浏览器会忽略该样式并自动置顶渲染。
caption-side:bottom 为什么没生效
直接写 caption-side: bottom 却看不到文字下移？大概率是因为 <caption> 元素没放在 <table> 的最开头——CSS 规范强制要求：<caption> 必须是 <table> 的第一个子元素，否则浏览器会忽略 caption-side 样式，甚至自动把它移到顶部渲染。
正确 HTML 结构必须这样写
不是“加了样式就行”，而是结构和样式缺一不可：
<table style="caption-side: bottom;"> <caption>这是表格说明</caption> <thead><tr><th>A</th><th>B</th></tr></thead> <tbody><tr><td>1</td><td>2</td></tr></tbody> </table>
-
<caption>必须紧贴<table>开始标签，不能有空格、注释或换行干扰（某些旧版 Safari 对空白敏感） - 样式可以写在
<table>上，也可以用 CSS 类：.table-with-bottom-caption { caption-side: bottom; } - 不支持
caption-side的 IE（包括 IE11）会无视该声明，始终把<caption>渲染在顶部
替代方案：当 caption-side 不可用时
如果要兼容 IE 或遇到 SSR 渲染顺序错乱（比如框架把 <caption> 插到中间），别硬扛，改用语义等价但更可控的方式：
- 去掉
<caption>，改用<div class="table-footer">说明文字</div>放在</table>后面，再用margin-top或flex布局模拟底部对齐 - 若需保持可访问性（如屏幕阅读器识别表说明），给该
<div>加role="region"和aria-labelledby指向表格的id - 不要用
<figcaption>—— 它只适用于<figure>，套在<table>外会破坏表格语义，影响表格导航逻辑
容易被忽略的细节
即使结构和样式都对，也可能因以下原因出问题：
立即学习“前端免费学习笔记（深入）”；
-
<caption>默认是块级元素，但部分 CSS 重置库（如 normalize.css）会给它设display: table-caption，这个值本身没问题，但若被意外覆盖成inline或flex，caption-side就失效 - Firefox 在某些 zoom 级别下对
caption-side: bottom渲染有微小偏移，不是 bug，是字体度量差异，不用 hack 修复 - 用
position: absolute强行把<caption>拉到底部？别这么做——它会脱离表格流，导致屏幕阅读器无法将其与表格关联
<caption> 更省心。 
