Safari/iOS下表格position absolute定位异常问题求助

问题说明 #

你的代码在Firefox中正常运行，但iOS Safari会忽略<tr>的position: relative设置，导致绝对定位的<td>以.container为参照定位，而非<tr>。这是因为Safari对表格行元素的position属性支持存在兼容性限制——表格元素的布局模型与普通块级元素不同，<tr>无法作为绝对定位元素的参照容器。

解决方案 #

方案一：借助<td>作为定位容器（推荐，保留原生表格布局）

由于Safari支持<td>的position: relative，可以将定位逻辑转移到单元格上，在<td>内部嵌套一个块级元素来应用绝对定位：

.container {
  position: relative;
  padding: 100px;
  background-color: red;
}

td {
  position: relative;
  /* 根据需求设置td的基础尺寸，保证布局正常 */
  height: 20px;
  width: 20px;
}

td .pos-element {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 10px;
  background-color: blue;
}

<div class="container">
  <table>
    <tr>
      <td><div class="pos-element"></div></td>
    </tr>
  </table>
</div>

方案二：修改表格布局为块级（仅适合无需原生表格特性的场景）

如果不需要表格的原生布局特性，可以将表格相关元素改为块级显示，让<tr>的position: relative生效：

.container {
  position: relative;
  padding: 100px;
  background-color: red;
}

table, tr {
  display: block;
}

tr {
  position: relative;
}

td {
  position: absolute;
  top: 0;
  height: 10px;
  width: 10px;
  background-color: blue;
}

注意：这种方式会破坏表格的默认单元格对齐、自适应宽度等特性，需根据实际场景选择。

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