Chrome 50 Изменение неявного поведения высоты ячейки таблицы

См. 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, 11. Chrome и Safari всегда пропускают неявный процентный рост на ячейки.

Какое правильное поведение соответствует спецификациям? Это было введено дизайном?

Изменить: Отчет об ошибке Chromium

Ответ 1

Возникает тот же вопрос, что и this Chromium issue, который был закрыт более 2 месяцев назад. Согласно комментариям, новое поведение в Chrome 50 "более соответствует требованиям".

Итак, чтобы ответить на ваш вопрос, казалось бы, это намеренно и считается (по крайней мере, разработчиками Chromium) правильным поведением в соответствии со спецификациями.

Решение, естественно, состоит в том, чтобы просто установить высоту ячейки на 100%.

Ответ 2

Вышеуказанный ответ работает (для объяснения задайте высоту ячеек 100%) Если вы хотите, чтобы все ячейки следовали этим шаблонам, вы можете просто использовать

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

В качестве альтернативы вы можете попробовать:

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

Я считаю, что оба должны работать.