safari 中 无法作为 absolute 定位的 containing block，实际锚定到 或
absolute 元素在 Safari 中锚定到 <table> 而不是预期的 <code><tr>，不是你写错了 CSS，是 Safari 对表格行定位上下文的实现与其他浏览器不一致——<code><tr> 在 Safari 中无法成为有效的 containing block。
<h3>为什么 <code><tr> 不能当 absolute 的父容器
<p>Safari（包括所有 WebKit 内核浏览器）明确不支持将 <code><tr> 设为 <code>position: relative 并让它成为 absolute 子元素的定位参考。即使你写了 position: relative，Computed 面板里会显示它生效了，但实际 containing block 仍向上回退到 <table> 或 <code><tbody>。这不是 bug，是规范允许的宽松实现差异。
<p>常见现象包括：伪元素 <code>::after 分隔线跑出表格、操作按钮错位到整行顶部、hover 提示框出现在错误行上方。
- Chrome/Firefox：
<tr> + <code>position: relative→ 可作为 containing block - Safari：同一样式 → containing block 是
<tbody> 或 <code><table>，且计算基准含边框/间距偏差 <li>DevTools 中检查该 <code><tr> 的 <code>offsetParent，Safari 下大概率显示为table用
<td> 替代 <code><tr> 作为定位上下文 <p>真正能跨浏览器稳定工作的方案，是把 <code>position: relative下移到<td> 上，并让 absolute 元素挂载在某个具体单元格内。这样既绕过 <code><tr> 的限制，又保持语义合理。 <p>例如分隔线场景：</p> <pre class="brush:php;toolbar:false;"><tr> <td colspan="2" class="spacer-cell"></td> </tr></pre> <p>对应 CSS：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3532" title="Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries"><img src="https://img.php.cn/upload/skill/000/000/081/178971312885770.jpg" alt="Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3532" title="Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries" class="overflowclass">Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries</a> <p class="overflowclass">规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...</p> </div> <a rel="nofollow" href="/xiazai/skill3532" title="Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;">.spacer-cell { position: relative; height: 8px; } .spacer-cell::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #eee; } </pre> <ul><li>必须用 <code>colspan确保<td> 横跨整行宽度 <li>避免给 <code><tr> 本身设 <code>position或transform，否则可能干扰<td> 的渲染层 <li>如果需要垂直居中分隔线，改用 <code>top: 50%; transform: translateY(-50%)，比固定top: 4px更可靠
非表格场景优先换布局，别硬扛 absolute
如果你的“表格”只是视觉呈现（比如菜单、设置项列表），根本没必要用 <table>。用 <code><ul></ul> + display: grid 或 flex 不仅规避 Safari 定位问题，还能天然支持响应式、无障碍和动画。
例如上下文菜单项：
然后对 .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> 就是不可靠的锚点，接受这点比花半天调 <code>transform 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
