table 单元格的内容可以垂直溢出吗？

Question

table 单元格可能包含溢出的内容，如 fixed table layout:

中所述

Any cell that has content that overflows uses the 'overflow' property to determine whether to clip the overflow content.

但是那个溢出可以是垂直的吗？ table height algorithms 表示

In CSS 2.1, the height of a cell box is the minimum height required by the content.

所以如果我没理解错的话，应该是不可能的。但我可以在 Firefox 上实现它：

table {
  height: 0;
  border: 5px solid blue;
}
td {
  width: 100px;
  height: 100%;
  border: 5px solid red;
}
div {
  height: 100%;
  border: 1px solid;
  background-color: yellow;
}

<table>
  <tr>
    <td>
      <div>Foo</div>
      <div>Bar</div>
    </td>
  </tr>
</table>

我是否误解了规范，或者这是一个错误？

Answer 1

§17.5.3 Table height algorithms 也说

CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.

它确实表明 — 您在不同的浏览器中会得到截然不同的结果。

这是它在 IE 上的样子：

在 Chrome 上：

据我所知：

Chrome 正在计算所需的最小高度，方法是让两个 div 元素都达到其内容所需的最小高度，相应地调整 table 的大小，并忽略div 元素的 height: 100% 声明。
IE 和 Firefox 调整 table 的方式与 Chrome 大致相同，但他们选择在 [=10= 上应用 height: 100% ] 元素代替。这会导致您描述的溢出。
IE 做了一些时髦的事情，它向上扩展了第一个 div，尽管 div 元素是块级的，而不是内联级的，但似乎完全忽略了基线.

由于这是未定义的行为，尤其是处理百分比高度的行为，因此很难说任何浏览器在这种特定情况下是正确的还是错误的。我怀疑您更有可能通过在 table 单元格上指定固定高度来获得对您的原始问题的满意答案。

table 单元格的内容可以垂直溢出吗？

Can the contents of a table cell overflow vertically?

css

firefox

overflow

language-lawyer

css-tables