设置表格的高度在Firefox中不起作用

Question

我有一张桌子，里面的细胞内容已经完全填满了。我给内容一个固定的宽度和height 100%，以便更大的元素仍然能够生长细胞。通过简单的height属性，单元格也具有最小高度，因此内容的100％高度具有效果。在Chrome和Edge中，一切正常，但在Firefox中，细胞不会增长：

铬：

火狐：

如果您想尝试自己：

＆＃13;

＆＃13;

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

td {
  height: 50px;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

更新

顺便说一下，当我在td上的行/ height和tr上设置固定height: 100%;时，它可以在Firefox中使用。但是它在Chrome中被打破了......

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。那就更有意义了。