overflow-anchor在table元素上完全不生效，必须作用于带overflow-y:auto和固定高度的父级div容器；safari完全不支持该属性。
overflow-anchor 在 table 上完全不生效
直接给 table 元素加 overflow-anchor: none 没用——浏览器会忽略它。表格本身不是滚动容器，也不参与滚动锚定上下文；就算你强行加上 overflow-y: auto，CSS 盒模型规则也会让这个声明被丢弃。
常见错误写法：.my-table { overflow-anchor: none; overflow-y: auto; }
这行不通。真正起作用的必须是包裹表格的、具备明确滚动能力的父容器。
必须作用于带固定高度的父级 div 容器
正确结构是把 table 套进一个有明确滚动行为的 div：
<div class="table-wrapper"> <table></table> </div>
对应样式必须同时满足三个条件：
-
overflow-y: auto（或scroll） -
max-height或height（不能靠内容撑开） overflow-anchor: none
例如：.table-wrapper { overflow-y: auto; max-height: 400px; overflow-anchor: none; }
加了 overflow-anchor: none 还跳？先查这三件事
视觉跳动大概率不是 CSS 写错，而是底层布局不稳定：
-
table没开table-layout: fixed→ 列宽随内容重算，触发重排 -
td内没设line-height或含未加载图片 → 行高浮动，插入后突变 -
thead没固定高度 → 表头高度随字体/内容变化，破坏锚点稳定性
这些比 overflow-anchor 更关键。没有它们，关掉锚定也没用。
Safari 用户根本看不到效果
截至 2026 年 7 月，Safari 完全不支持 overflow-anchor —— 无论你怎么写，它都当没看见。你在 Chrome 里调好的效果，在 Safari 中既不会补偿，也不会禁用，行为退回到原始渲染逻辑。
这意味着：
- 不能靠它做跨浏览器一致性防跳动
- 依赖该属性保护输入焦点的场景（如编辑器内动态追加），Safari 用户仍会遇到光标被顶走
- JS 动态设置
element.style.overflowAnchor = 'none'同样无效
真要兼容 Safari，得用 MutationObserver + 手动 scrollTo，或者改用 position: sticky 配合固定容器高度等替代方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
