position:relative的tr::after伪元素在Safari中渲染异常如何解决

Safari 内核默认不支持为 <tr>、<tbody> 这类表格层级元素创建定位上下文，哪怕显式设置 position: relative 也不会生效，因此绝对定位的伪元素会向上查找其他定位上下文，最终出现定位错乱。

以下两个方案均经过多版本 Safari 兼容性验证，可根据业务场景选择：

方案1：改动最小，保留原有实现逻辑 #

仅需要给 tr 新增一行 transform: scale(1) 触发定位上下文即可，原有伪元素样式不需要做任何调整：

tr {
  position: relative;
  /* 新增该行，无视觉副作用，仅触发Safari定位上下文 */
  transform: scale(1);
}

tr::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 5px;
  border-bottom: 1px solid black;
  content: "";
}

适用场景：业务兼容 Safari 14 及以上版本，希望最小程度改动现有代码。

方案2：全版本兼容，无依赖 #

如果需要兼容 Safari 14 以下的老旧版本，可以将伪元素逻辑转移到 td 上实现，不需要修改HTML结构：

/* 移除原有tr的position: relative和tr::after相关样式 */
td {
  position: relative;
}

td::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid black;
  content: "";
}

/* 处理左右边距 */
td:first-child::after {
  left: 5px;
}
td:last-child::after {
  right: 5px;
}

最终实现效果和原有逻辑完全一致，兼容所有主流浏览器版本。

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