Safari 中 <tr> 无法作为 absolute 定位的 containing block，实际锚定到 <table> 或 <tbody>；应改用 <td> 设置 position: relative，或改用语义化非表格布局。
absolute 元素在 Safari 中锚定到 <table> 而不是预期的 <tr>，不是你写错了 CSS，是 Safari 对表格行定位上下文的实现与其他浏览器不一致——<tr> 在 Safari 中无法成为有效的 containing block。
为什么 <tr> 不能当 absolute 的父容器
Safari（包括所有 WebKit 内核浏览器）明确不支持将 <tr> 设为 position: relative 并让它成为 absolute 子元素的定位参考。即使你写了 position: relative，Computed 面板里会显示它生效了，但实际 containing block 仍向上回退到 <table> 或 <tbody>。这不是 bug，是规范允许的宽松实现差异。
常见现象包括：伪元素 ::after 分隔线跑出表格、操作按钮错位到整行顶部、hover 提示框出现在错误行上方。
- Chrome/Firefox：
<tr>+position: relative→ 可作为 containing block - Safari：同一样式 → containing block 是
<tbody>或<table>，且计算基准含边框/间距偏差 - DevTools 中检查该
<tr>的offsetParent，Safari 下大概率显示为table
用 <td> 替代 <tr> 作为定位上下文
真正能跨浏览器稳定工作的方案，是把 position: relative 下移到 <td> 上，并让 absolute 元素挂载在某个具体单元格内。这样既绕过 <tr> 的限制，又保持语义合理。
立即学习“前端免费学习笔记（深入）”；
例如分隔线场景：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
<tr> <td colspan="2" class="spacer-cell"></td> </tr>
对应 CSS：
.spacer-cell {
position: relative;
height: 8px;
}
.spacer-cell::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #eee;
}
- 必须用
colspan确保<td>横跨整行宽度 - 避免给
<tr>本身设position或transform，否则可能干扰<td>的渲染层 - 如果需要垂直居中分隔线，改用
top: 50%; transform: translateY(-50%)，比固定top: 4px更可靠
非表格场景优先换布局，别硬扛 absolute
如果你的“表格”只是视觉呈现（比如菜单、设置项列表），根本没必要用 <table>。用 <ul> + display: grid 或 flex 不仅规避 Safari 定位问题，还能天然支持响应式、无障碍和动画。
例如上下文菜单项：
<ul class="menu-list"> <li class="menu-item">Cut</li> <li class="menu-item is-divider"></li> <li class="menu-item">Paste</li> </ul>
然后对 .is-divider 做样式：
.menu-item.is-divider {
height: 8px;
margin: 4px 0;
border-top: 1px solid #eee;
}
- 完全避开定位上下文问题，无兼容性风险
- 语义清晰，屏幕阅读器可读性更好
- 不需要任何
position、z-index或transform修复
最常被忽略的一点：以为加了 position: relative 就万事大吉，却没验证 DevTools 里的 offsetParent 和 Containing block 到底是谁。Safari 下，<tr> 就是不可靠的锚点，接受这点比花半天调 transform 更省时间。
