overflow-anchor 在 <table> 元素上完全不生效；必须作用于包裹表格的、具备 overflow-y: auto 和固定高度的父级 <div> 容器，且 Safari 完全不支持该属性。
overflow-anchor 对表格无效，别往 <table> 上加
直接说结论：overflow-anchor 在 <table> 元素上完全不生效。表格本身不是滚动容器，也不参与滚动锚定上下文——哪怕你给它加 overflow-y: auto，浏览器也会忽略（因为 <table> 的盒模型不允许直接溢出裁剪）。常见错误是写成：
.my-table { overflow-anchor: none; overflow-y: auto; }
这行不通。真正起作用的必须是包裹表格的、具备明确滚动能力的父容器。
正确做法：把表格放进带 overflow-y: auto 的 <div> 容器
只有设置了 overflow-y: auto 且有固定高度/最大高度的块级容器，才能成为滚动锚定的作用目标。表格跳动问题，本质是表格所在容器在动态插入行时发生了高度突变，触发了浏览器默认的锚定补偿。
- ✅ 正确结构：
<div class="table-wrapper"><table>...</table></div> - ✅ 正确样式：
.table-wrapper { overflow-y: auto; max-height: 400px; overflow-anchor: none; } - ❌ 错误写法：
table { overflow-anchor: none; }（被忽略） - ❌ 错误写法：
.table-wrapper { overflow-anchor: none; }但没设overflow-y或高度（属性无触发条件）
表格动态加载时仍跳动？检查这三件事
加了 overflow-anchor: none 还跳，大概率不是 CSS 写错，而是底层布局不稳定：
立即学习“前端免费学习笔记（深入）”；
- 表格行高未固定：
tr或td内含图片、异步文本、未设line-height，导致插入后重排 → 给td加vertical-align: top和line-height: 1.5 - 列宽未锁定：
table-layout: fixed没开，浏览器要重新计算每列宽度 → 必须加table { table-layout: fixed; width: 100%; } - 首行表头未占位：
<thead>高度随内容浮动 → 给thead th设固定height或用min-height
这些比 overflow-anchor 更关键。没有它们，就算关了锚定，视觉抖动照旧。
Safari 用户看不到效果？这不是 bug，是现实
overflow-anchor 在 Safari 中**完全不支持**（截至 2026 年 7 月），无论你怎么写，它都当没看见。Chrome/Edge 里关闭锚定后滚动位置“不动”，Safari 里依然会微调——这不是你漏写了什么，是平台能力缺失。
真实项目中必须降级：
- 对 Safari UA，提前给表格行预留高度：
tr::before { content: ""; display: block; height: 36px; }（配合visibility: hidden控制） - 用
white-space: nowrap+text-overflow: ellipsis防止单元格内文本换行引发高度突变 - 避免在表格内嵌
<img>或<iframe>，改用占位图 +aspect-ratio
记住：overflow-anchor: none 是 Chrome/Edge 的“快捷开关”，不是跨浏览器通用解法。表格场景下，控制盒模型稳定性永远比依赖这个属性更可靠。
