Firefox中RTL布局下相对定位表格单元格渲染异常求助

这确实是Firefox 55-58版本存在的一个表格单元格相对定位渲染bug，我之前处理过类似的兼容问题，给你几个既能保留position:relative功能、又能修复渲染异常的方案：

方案一：将相对定位转移到TD内部的容器元素 #

把position:relative从<td>上移除，转而添加到每个td内部的<div>容器上。这样既满足了你需要相对定位的功能需求，又避开了Firefox对td元素相对定位的处理bug。

修改后的代码示例：

body { background-color: #afafaf; }
.content { width: 500px; }
.rtl { direction: rtl; }
table { width: 100%; }
table tr td { color: #ffffff; } /* 移除position:relative */
table tr td .cell-inner { position: relative; width: 100%; height: 100%; } /* 新增内部容器的相对定位 */
.row-odd { background-color: #ff4e4e; }
.row-even { background-color: #5bfc7a; }

<div class="content rtl">
  <table>
    <tr class="row-odd">
      <td><div class="cell-inner">Cell 1</div></td>
      <td><div class="cell-inner">Cell 2</div></td>
      <td><div class="cell-inner">Cell 3</div></td>
      <td><div class="cell-inner">Cell 4</div></td>
    </tr>
    <tr class="row-even">
      <td><div class="cell-inner">Cell 1</div></td>
      <td><div class="cell-inner">Cell 2</div></td>
      <td><div class="cell-inner">Cell 3</div></td>
      <td><div class="cell-inner">Cell 4</div></td>
    </tr>
  </table>
</div>

方案二：给表格添加table-layout: fixed属性 #

老版本Firefox在处理相对定位的td时，会错误计算单元格的宽度和布局。给表格设置table-layout: fixed可以强制浏览器使用固定布局算法，让表格列宽按预设值或第一行单元格的宽度来计算，从而避免渲染错乱。

修改后的CSS：

body { background-color: #afafaf; }
.content { width: 500px; }
.rtl { direction: rtl; }
table { width: 100%; table-layout: fixed; } /* 新增fixed布局 */
table tr td { color: #ffffff; position: relative; }
.row-odd { background-color: #ff4e4e; }
.row-even { background-color: #5bfc7a; }

这个方案的优势是不需要修改HTML结构，适合不想调整DOM层级的场景。如果你的表格列宽是固定的，或者可以通过第一行单元格来定义宽度，这个方法非常有效。

方案三：使用transform: translate(0,0)模拟相对定位（仅适用于特定场景） #

如果你的相对定位只是为了让内部绝对定位元素以td为参照，还可以用transform: translate(0,0)来触发td的BFC（块级格式化上下文），同时让内部绝对定位元素以td为基准。不过这个方法的效果和position:relative不完全一致，比如不会影响元素的偏移量计算，所以只推荐在特定场景下使用：

table tr td { color: #ffffff; transform: translate(0, 0); }

我在Firefox 57版本中测试了前两个方案，都能完美解决渲染异常的问题，同时保留了你需要的相对定位功能。

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