html - Chrome 和 Firefox 中的 'div' 高度不同

Question

我有一个表格，其单元格包含具有不同内容的 div 元素，因此它们具有不同的高度。以这个 fiddle 为例:

https://jsfiddle.net/6btarubL/2/

如您所见，代码非常简单:

HTML

<table>
  <tr>
    <td>
      <div style="background-color: orange">
        DIV
      </div>
    </td>
    <td>
      <div style="background-color: aqua">
        Line 1<br>
        Line 2
      </div>
    </td>
    <td>
      <div style="background-color: #fac">
        10<br>
        20<br>
        30<br>
      </div>
    </td>
  </tr>
   <tr>
    <td>
      <div style="background-color: #8f5">
        DIV
      </div>
    </td>
    <td>
      <div style="background-color: #cb1">
        Line 2.1<br>
        Line 2.2
      </div>
    </td>
    <td>
      <div style="background-color: #eda">
        10<br>
        20<br>
        30<br>
      </div>
    </td>
  </tr>
</table>

CSS

tr {
  height: 100%;
}

td {
  vertical-align: top;
  min-width: 150px;
  height: 100%;
}

td div {
  height: 100%;
}

我希望单元格内的 div 占据所有空间，因此它们看起来一样。 Firefox 就是这样做的，所以它的渲染是:

Chrome，另一方面，不遵守 height : 100% df df，所以渲染是:

然后有趣的事实是，如果我没记错的话，在我更新到 63 版之前，Chrome 一直在呈现与 Firefox 相同的效果(我想我之前有 59 版)。

有什么建议吗？谢谢!

Answer 1

请更改此 Css 代码并再次检查。 Chrome

td {
  vertical-align: top;
  min-width: 150px;
  height:1;
}