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

Question

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

中所述

  

任何内容溢出的单元格都使用'overflow'   确定是否剪切溢出内容的属性。

但这可能是垂直的吗？ table height algorithms说

  

在CSS 2.1中，单元格框的高度是所需的最小高度   内容。

因此，如果我理解正确，那就不可能了。但我可以在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没有定义在使用百分比值指定高度时如何计算表格单元格和表格行的高度。

它确实表明 - 在各种浏览器中你会得到截然不同的结果。

这是IE上的样子：

在Chrome上：

据我所知：

• Chrome正在计算所需的最小高度，使两个div元素的内容所需的最小高度，相应地调整表格大小，并忽略{{1}上的height: 100%声明元素。

• IE和Firefox按照与Chrome相同的方式调整表格大小，但之后他们选择在div元素上应用height: 100%。这会导致您描述的溢出。

• 尽管div元素是块级别而不是内联级别，但IE在向前扩展第一个div时会做一些时髦的事情，似乎完全忽略了基线。

由于这是未定义的行为，特别是那种处理百分比高度的行为，因此在这种特定情况下很难说任何浏览器是正确还是错误。我怀疑你更有可能（尽管仍然无法保证）通过在你的桌子上指定固定的高度来获得原始问题的满意答案。