RTL 和相关表格单元格的 Firefox 问题

Question

我有以下代码：

body {
  background-color: #afafaf;
}

.content {
  width: 500px;
}

.rtl {
  direction: rtl;
}

table {
  width: 100%;
}

table tr td {
  color: #ffffff;
  position: relative;
}

.row-odd {
  background-color: #ff4e4e;
}

.row-even {
  background-color: #5bfc7a;
}

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

在 Firefox（版本：55/56/57/58）中，结果是：

在 Chrome 中，我看到以下内容：

当 TD 单元格分配了“位置：相对”属性时，会出现问题，删除时，表格在两个浏览器中都正确呈现。 由于将使用其他功能，我需要表格单元格的“位置：相对”。

有人知道如何解决这个问题吗？

Answer 1

我认为这是一个错误

https://jsfiddle.net/32e7sz2e/

table {
  width: 100%;
  border: 1px solid black;
}

table tr td {
  color: #ffffff;
  position: relative;
  border: 1px solid white;
}

我添加了一些边框来显示表格的位置，如果我检查并设置 text-align: 对，表格会自行更正，这很有趣。可能是 FF 的某种显示问题。

如果您需要相对位置，则在单元格内添加一个包装器并将其设置为相对

https://jsfiddle.net/32e7sz2e/1/

  <td>
    <div>
      Cell 1
    </div>
  </td>
  <td>
    <div>
      Cell 2
    </div>
  </td>

Answer 2

一种方法是在每个td 中使用div 并在其上应用position: relative。

body {
    background-color: #afafaf;
}
.tbl-container{
    height: 1px;
}
.content {
    width: 500px;
}
.rtl {
    direction: rtl;
}
table {
    width: 100%;
    height: 100%;
     position: relative;
}
table tr td {
    color: #ffffff;
}
td>div{
    position: relative;
    background: #99b;
    height:100%;
}
td>div>span{
    background:#257;
    border-radius:50%;
    width:20px;
    height:20px;
    left:20px;
    top:15px;
    position:absolute;
}
td{
    height:50px;
}
.row-odd {
    background-color: #ff4e4e;
}
.row-even {
    background-color: #5bfc7a;
}

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