在 Safari 浏览器中， 如果你发现 absolute 元素在 Safari 中没有锚定到预期的 需要特别注意的是，Safari（以及大多数 WebKit 内核浏览器）并不真正支持把 常见表现包括：伪元素 真正适合跨浏览器、并且在 Safari 中也能稳定工作的解决方案，是把 例如分隔线场景： 对应 CSS： 如果你的“表格”只是为了视觉展示，例如菜单、设置项列表、操作面板等，其实没有必要强行使用 不能作为 absolute 定位元素的 containing block，实际定位通常会回退并锚定到 或
；更稳妥的做法是改用 设置 position: relative，或者直接使用更语义化的非表格布局来解决 Safari 下 CSS absolute 定位参考容器错误的问题。
，而是跑到了 上，这通常不是 CSS 写错，也不是简单的样式冲突，而是 Safari 对表格行定位上下文的实现与 Chrome、Firefox 等浏览器存在差异——在 Safari 里，
无法稳定充当有效的 containing block。
为什么
不能当 absolute 的父容器
设置为 position: relative 后作为 absolute 子元素的定位参考容器。即使你在样式中已经写了 position: relative，并且在 Computed 面板里也能看到样式生效，实际使用时 containing block 仍然会向上回退到 或
。这类 Safari 定位表现虽然容易让人误以为是浏览器 bug，但本质上属于规范允许范围内的实现差异。
::after 画出的分隔线超出表格区域、操作按钮错位到整行顶部、hover 提示框出现在错误的行上方，导致 Safari 下表格布局和 absolute 定位看起来完全不符合预期。
+ position: relative → 通常可以作为 containing block
或 ，并且计算基准还可能带有边框或间距偏差
的 offsetParent，Safari 下多数情况下会显示为 table
用
替代 作为定位上下文
position: relative 从 下移到 上，再让 absolute 元素放到某个具体单元格内部进行定位。这样既能避开 在 Safari 中不能作为定位参考的问题，也能尽量保持表格结构的语义正确。
.spacer-cell {
position: relative;
height: 8px;
}
.spacer-cell::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #eee;
}
colspan 确保这个 可以横跨整行宽度，否则分隔线长度可能不正确
本身继续设置 position 或 transform，否则可能对 的渲染层级产生额外干扰
top: 50%; transform: translateY(-50%)，通常会比写死 top: 4px 更稳定、更适合不同高度场景非表格场景优先换布局，别硬扛 absolute
Safari中CSS absolute定位参考容器错误的修复方法
在 Safari 浏览器中， 不能作为 absolute 定位元素的 containing block，实际定位通常会回退并锚定到 或 ；更稳妥的做法是改用 设置 position: relative，或者直接使用更语义化的非表格布局来解决 Safari 下 CSS absolute 定位参考容器错
