Safari中绝对定位伪元素不遵循相对定位父元素问题排查

问题原因 #

Safari对表格行（<tr>）的position: relative支持存在兼容性缺陷：表格行的布局由浏览器表格引擎单独处理，即使显式设置相对定位，也无法成为其伪元素的定位包含块，伪元素会默认以<table>为基准定位，导致分隔线位置异常。

修复方案 #

核心思路是用表格单元格（<td>）作为定位容器——Safari能正确识别<td>的相对定位上下文。

1. 修改HTML结构

给空的分隔行添加一个跨所有列的<td>：

<table class="context-menu">
  <tr>
    <td>Cut</td>
    <td>Ctrl+X</td>
  </tr>
  <tr class="spacer">
    <td colspan="2"></td> <!-- 跨列单元格作为定位载体 -->
  </tr>
  <tr class="disabled">
    <td>Paste</td>
    <td>Ctrl+Z</td>
  </tr>
  <tr>
    <td>Copy</td>
    <td>Ctrl+C</td>
  </tr>
</table>

2. 调整CSS样式

将定位基准从<tr>转移到内部的<td>：

table.context-menu tr.spacer {
  height: 8px; /* 保持原有的留白高度 */
}
table.context-menu tr.spacer td {
  position: relative;
  height: 100%; /* 继承行高确保垂直居中生效 */
  padding: 0; /* 清除单元格默认内边距 */
}
table.context-menu tr.spacer td:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 1px;
  width: 100%;
  background-color: var(--item-disabled);
}

替代方案（无需修改HTML） #

如果不想调整HTML结构，可以直接给分隔行添加边框，并通过内边距模拟留白：

table.context-menu tr.spacer {
  height: 8px;
  border-top: 1px solid var(--item-disabled);
  border-collapse: separate;
  border-spacing: 0;
}

不过这种方法的垂直居中精度略逊于伪元素方案，适合对布局精度要求不高的场景。

内容的提问来源于stack exchange，提问作者KienHT