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

Question

表格单元格可能包含溢出的内容，如 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 元素都达到其内容所需的最小高度，相应地调整表格的大小，并忽略 height: 100% div 元素上的声明。

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

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

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