iOS端position relative失效致布局错乱，如何修复？

PC端使用position: relative布局显示正常，但iPhone访问时出现布局错乱、罗马数字错位的问题，核心原因是Safari（iPhone默认浏览器）对表格元素的position属性支持存在特殊性，结合你提供的代码，给出以下解决方法：

问题分析 #

你当前的代码直接给<tr>设置position: relative，并给<td>设置position: absolute：

<tr style="position: relative;">
   <td style="left: 10px;"></td>
   <td style="right: 10px;"></td>
</tr>

<style>
tr{
   position: relative;
}
td{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}
</style>

这种写法在桌面端浏览器可能生效，但Safari中表格行（<tr>）并非标准块级元素，position: relative无法正确成为其子元素（<td>）的定位上下文，导致absolute定位的<td>脱离表格正常布局流，相对于父级容器甚至页面body定位，最终引发错位。

解决方案 #

方案1：替换表格布局为Flex布局（推荐） #

表格更适合展示结构化数据，而非自定义定位布局。改用Flex布局能在移动端获得更一致的渲染效果：

<div class="row-container">
  <div class="left-item">罗马数字内容</div>
  <div class="right-item">右侧内容</div>
</div>

.row-container {
  display: flex;
  justify-content: space-between; /* 左右元素两端对齐 */
  width: 100%;
  position: relative; /* 如需作为子元素定位上下文可保留 */
}
.left-item {
  margin-left: 10px;
}
.right-item {
  margin-right: 10px;
}

方案2：保留表格结构的修正写法 #

如果必须使用表格，需避免直接给<tr>和<td>设置定位属性，改用表格原生的布局属性控制位置：

<tr>
  <td class="left-td">罗马数字内容</td>
  <td class="right-td">右侧内容</td>
</tr>

.left-td {
  padding-left: 10px; /* 用padding替代left定位 */
  text-align: left;
}
.right-td {
  padding-right: 10px; /* 用padding替代right定位 */
  text-align: right;
}

若一定要用定位，可在<tr>内嵌套一个块级容器作为定位上下文：

<tr>
  <td colspan="2">
    <div class="position-wrapper">
      <div class="left-content">罗马数字内容</div>
      <div class="right-content">右侧内容</div>
    </div>
  </td>
</tr>

.position-wrapper {
  position: relative;
  width: 100%;
  min-height: 40px; /* 确保容器有高度 */
}
.left-content {
  position: absolute;
  left: 10px;
}
.right-content {
  position: absolute;
  right: 10px;
}

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