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

【问题标题】：Chrome 50 Change in implicit table-cell height behaviourChrome 50 更改隐式表格单元格高度行为
【发布时间】：2016-04-15 09:12:59
【问题描述】：

见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。Chrome 和 Safari 总是将隐式百分比高度传递给单元格。

根据规范，正确的行为是什么？这是有意引入的吗？

编辑： Chromium Bug Report

【问题讨论】：

这不应该是 Chrome 人的问题吗？他们知道在 SO 上闲逛吗？
也作为 Chromium 问题提交。由于这会产生重大影响，我希望能从反应更迅速的社区中获得见解。
这里可能被视为离题。
嗯...规格 CSS2.1 和 CSS2.2 - 快速浏览似乎表明 " 'table-row' 的 'auto' 的 'height' 值表示用于布局的行高为 MIN。” 深入阅读可能表明 Chrome 已更正到正确的操作...这可能需要一些时间。

标签： html css google-chrome chromium

【解决方案1】：

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

因此，为了回答您的问题，这似乎是有意的，并且（至少被 Chromium 开发人员）认为是根据规范的正确行为。

解决方案自然是将单元格的高度显式设置为 100%。

【讨论】：

【解决方案2】：

上述答案有效（明确将单元格高度设置为 100%）如果您希望所有单元格都遵循该模式，您可以简单地使用

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

或者，您可以尝试：

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

我相信任何一个都应该有效。

【讨论】：