Display:block + overflow:auto，它们是如何工作的？

Question

之前在 SO 上发布了一篇关于如何使span标签在标签中占据整个高度的帖子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 上。

- Jaay

---

我在Firefox浏览器中无法看到jsfiddle上两者之间的区别。 - bugwheels94

粉色的部分（最左边）在改变，可能与浏览器有关，我使用Chrome浏览器，看到了不同。 - Jaay

是的，我同意Ankit的观点...在Firefox中没有任何区别，只有在Chrome中有（其他浏览器尚未测试）。 - Atrox111

好的，我认为这与Chrome有关，已更新原帖。 - Jaay

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验证您的文档通常会有所帮助。

- Sumurai8

Answer 2

overflow决定了如果你的块不适合给定的尺寸会发生什么。如果你加载图片，这一点尤其重要。 对于显示，你可能想要阅读一下这个： SPAN vs DIV (inline-block)。

现在来看看区别： 准备好我估计在这里的任何东西的大小并将其变成粉色 vs background-color:pink;display:block;overflow:auto"> 现在将它变成粉色，这实际上是一个块而不是一个span，如果它不适合就增加大小直到它适合。

但是似乎你的代码在Firefox上表现出不良行为，只在Chrome上工作，这表明这可能不是你想要的解决方案。

- Thijser

---

问题是为什么同时设置display:block和overflow:auto会导致这种结果。 - Jaay