html - 显示 :block + overflow:auto, 它们是如何工作的

Question

前段时间发布在 SO Span to take full height on a TD 上，当我尝试一些解决方法时，我找到了一个合适的代码来执行预期的操作(已接受的代码)，但无法确定它为什么有效，所以为什么

<td style="padding:0px;">
 <span style="height:100%; width:5px; background-color:pink;">&nbsp;</span>
</td>

与

有很大的不同

<td style="padding:0px;">
 <span style="height:100%; width:5px; 
    background-color:pink;display:block;overflow:auto">&nbsp;
 </span>
</td>

这里有一个 jsfiddle 来解释更多 http://jsfiddle.net/7kkhh/2/

有深入了解 display 和 overflow 背后机制的人可以解释一下吗？ (它与这种特定情况有关还是常用？)

已编辑: 这似乎只发生在 Chrome 上

Answer 1

span 元素默认呈现为 inline-block，就像文本节点一样。它们在子元素周围折叠(或者:它们占用子元素所需的空间，但仅此而已)。

div 元素默认呈现为 block 。它们扩展到父元素的大小，除非它们的子元素不适合它。如果 overflow(实际上是 overflow-x 和 overflow-y 的简写)是 auto(默认)，元素将扩展直到它的子元素适合。这将反过来扩展它的父元素，除非它们为 overflow 设置了其他值。如果 overflow 为 scroll，则如果子元素不适合该元素，该元素将不会展开，而是显示滚动条。如果 overflow 为 hidden，元素将不会展开，但父元素之外的(部分)子元素将被隐藏(这并不意味着您无法滚动该元素，但不会显示任何滚动条)。

---

由于 inline-block 与 height: 100%; 冲突，渲染时将忽略 CSS 样式。表格单元格的 display 值为 table-cell 或类似的值。我不确定它的行为。要在不同的浏览器中获得一致的布局，表格和布局总是一个麻烦的组合。在 xhtml-strict 中验证您的文档通常有助于在浏览器中一致地显示您的文档。