显示：block + overflow：auto，它们是如何工作的

问题描述：

在SO Span to take full height on a TD上发布了一段时间之前，当我尝试了一些解决方法时，我发现了一个合适的代码来执行预期的操作（接受的代码）牛逼能确定这是为什么工作，为什么显示：block + overflow：auto，它们是如何工作的

<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/

可有人谁深入了解显示和溢出背后的机制解释这一点？（是它涉及到这种特殊情况下，或者是常用的？）

编辑： 这似乎只在Chrome

我无法看到两者之间在我的Firefox jsfiddle之间的任何区别 – bugwheels94

粉红色的部分（最左）正在改变，这可能是浏览器相关的，我在Chrome上，我看到了一个区别 – Jaay

是的，我同意Ankit ...在Firefox中没有任何区别，只有在Chrome中（其他未测试过） – Atrox111

答

A span元素默认情况下呈现为inline-block，就像文本节点一样。他们围绕自己的孩子元素倒塌（或者：他们占用尽可能多的空间，因为他们的孩子元素需要，但没有比这更多）。

A div元素默认情况下呈现为block。它们扩展到其父元素的大小，除非它们的子元素不适合它。如果overflow（实际上是overflow-x和overflow-y的简写）是auto（默认值），则该元素将展开直到它的子元素适合为止。这将依次扩展它的父元素，除非它们为overflow设置了其他值。如果overflow为scroll，如果子元素不适合此元素，则该元素将不会展开，但将显示滚动条。如果overflow为hidden，则元素将不会展开，但父元素外部的子元素的（部分）将被隐藏（这并不意味着您无法滚动该元素，但没有滚动条会可见）。

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

答

溢出发生确定你的块不适合它的给定尺寸会发生什么。如果您正在加载图片，这一点尤其重要。为了显示你可能想在这个读了起来： SPAN vs DIV (inline-block)

现在的区别是：准备的一切我估计是在这里，并使其粉红色 VS 背景颜色大小：粉红色;显示器：块;溢出：汽车“> 使其粉红现在这竟是块不是一个跨度，它它不适合增加大小，直到它

，但似乎你的代码显示在Firefox上不受欢迎的行为，以及独一无二。在铬上工作暗示可能这不是你以后的解决方案。

问题是为什么做BOTH显示：block and overflow：auto result to that – Jaay

显示：block + overflow：auto，它们是如何工作的

相关推荐