2

前段时间在 SO Span 上发布以在 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/

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

编辑： 这似乎只发生在 Chrome

4

2 回答 2

2

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

默认情况下，div元素呈现为block. 它们扩展到其父元素的大小，除非它们的子元素不适合它。如果（实际上是andoverflow的简写）是（默认），则元素将展开，直到它的子元素适合。这将反过来扩展它的父元素，除非它们为. 如果是，如果子元素不适合此元素，则不会展开该元素，而是显示滚动条。如果为 is ，则该元素不会被展开，但父元素之外的子元素（部分）将被隐藏（这并不意味着您不能滚动该元素，但不会显示任何滚动条）。overflow-xoverflow-yautooverflowoverflowscrolloverflowhidden

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

于 2013-06-28T14:09:30.763 回答
0

溢出确定如果您的块不适合它的给定尺寸会发生什么。如果您还要加载图片，这一点尤其重要。对于显示，您可能需要阅读以下内容： SPAN vs DIV (inline-block)

现在的区别：准备我估计在这里的任何大小并将其设为粉红色 vs background-color:pink;display:block;overflow:auto"> 将其设为粉红色现在这实际上是一个块而不是一个跨度并且它不适合增加尺寸，直到它适合。

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

于 2013-06-28T13:19:28.157 回答