Question

请参阅jsFiddle。

<table>
  <tr>
    <td>
      <div>
        Hello World
      </div>
    </td>
  </tr>
</table>

html, body {
  height:100%;
  background-color:steelblue;
  margin:0;
}

table {
  height:100%;
  border:1px;
}

td {
  border:1px;
}

tr {
  background-color: green;
}

div {
  background-color:salmon;
  height:100%;
}

在Chrome 50之前，高度为100％的表格也会隐式将高度100％应用于它的表格单元格。

这是Firefox和IE版本中的longstanding bug＆lt; 11. Chrome和Safari总是将隐含的百分比高度传递到单元格上。

根据规格，正确的行为是什么？这是由设计引入的吗？

编辑： Chromium Bug Report

Answer 1

这似乎与this Chromium问题相同，该问题已于2个月前结束。根据那里的评论，Chrome 50中的新行为是“更符合规范”。

所以，为了回答你的问题，这个似乎是有意的，并且根据规范被认为（至少是Chromium开发者）是正确的行为。

解决方案当然是将单元格的高度明确设置为100％。

Answer 2

上述答案有效（明确将单元格高度设置为100％）如果您希望所有单元格都遵循这些模式，则只需使用

即可

<style>
   td{
     height:100%;
   }
</style>

或者，您可以尝试：

<style>
   td{
     height:inherit;
   }
</style>

我相信要么应该有用。

Chrome 50更改隐式表格单元格高度行为

2 个答案: