在Firefox中设置表格单元格高度无效

Question

我有一个表格，单元格的内容完全填充它们。我给内容设置了固定的宽度和height为100％，这样更大的元素仍然能够增加单元格的大小。通过简单的height属性，单元格还具有最小高度，以便内容的100％高度产生影响。在Chrome和Edge中，一切正常，但在Firefox中，单元格不会增长：

Chrome:

Firefox:

如果你想自己尝试：

table {
  border-spacing: 8px;
  font-size: 14px;
}

td {
  height: 50px;
}

td div {
  height: 100%;
  width: 200px;
  background-color: green;
}

<table>
  <tr>
    <td>
      <div>
        This div is normal sized.
      </div>
    </td>
    <td>
      <div>
        This div is normal sized.
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        This div is also normal sized but should size accordingly.
      </div>
    </td>
    <td>
      <div>
        This div is very very big so it gets higher and should affect other divs in the same row. But not in Firefox apparently.
      </div>
    </td>
  </tr>
</table>

我不确定这是Firefox的一个错误还是Chrome的一个功能，但我理解表格大小的方式是表格元素不能有固定的大小。相反，它们的width和height属性被用作min-width/min-height，并根据其内容增长。是否有一个快速的解决方法，或者我应该在flexbox布局中重建表格？

更新：

顺便说一下，当我在行/ tr上设置了固定的height，并在td上设置了height: 100%;时，在Firefox中它可以工作。但在Chrome中它就会出问题...

- Aram Becker

Answer 1

我成功找到了一个解决办法。我添加了以下这些行：

。

@-moz-document url-prefix() {
    tr {
        height: 50px; // Your min height
    }
    td {
        height: auto;
    }
}

我的CSS已经调整好了，现在在Firefox和Chrome中显示正常。虽然不太干净，但是能用。显然，Chrome打算在50版本中采用Firefox的表格行为，但因为它破坏了太多布局而被撤销。将height: 100％;应用于tds的技巧有效，因为所有百分比大小都会自动转换为auto。这样做更有意义。

- Aram Becker