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>

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

的方法

深入了解显示和溢出背后机制的人能解释一下吗？（它与这种特殊情况有关还是常用？）

编辑： 这似乎只发生在Chrome

上

Answer 1

默认情况下，span元素呈现为inline-block，就像文本节点一样。它们围绕着他们的子元素崩溃（或者：他们占用的空间与子元素所需的空间一样多，但仅此而已。）

默认情况下，div元素呈现为block。它们扩展到其父元素的大小，除非它们的子元素不适合它。如果overflow（实际上是overflow-x和overflow-y的简写）是auto（默认），则该元素将展开，直到它的子元素适合为止。这将反过来扩展它的父元素，除非它们为overflow设置了其他值。如果overflow为scroll，则如果子元素不适合此元素，则不会展开元素，而是显示滚动条。如果overflow为hidden，则元素将不会展开，但隐藏在父元素之外的子元素的（部分）将被隐藏（这并不意味着您可以＆＃ 39; t滚动元素，但不会看到滚动条。）

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

Answer 2

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

现在差异：准备我估计在这里的任何大小，并使其变成粉红色 VS 背景色：粉红色;显示：块;溢出：汽车“＆GT; 让它粉红色现在这实际上是一个块而不是跨度它并不适合增加尺寸，直到它。

但似乎你的代码在firefox上也显示了不需要的行为，并且仅适用于chrome，这表明这可能不是你所追求的解决方案。

显示：块+溢出：自动，它们如何工作

2 个答案: