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

前几次在SO上发布，当我尝试一些变通方法时，我找到了一个合适的代码来执行预期的操作（已被接受的代码），但无法确定为什么这样做有效，为什么

<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来解释更多

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

编辑：

---

这似乎只发生在Chrome上。溢出决定了如果块不符合给定的尺寸，会发生什么。如果您正在加载图片，这一点尤其重要。 对于显示，您可能需要阅读以下内容：

现在的区别是： 准备好我估计要放在这里的东西的尺寸，把它变成粉红色 vs 背景颜色：粉红色；显示：块；溢出：自动“> 现在让它变成粉红色这实际上是一个块而不是一个跨度，它不适合增加大小，直到它

---

但是你的代码似乎也在firefox上显示了不想要的行为，并且只在chrome上运行，这表明这可能不是你想要的解决方案。

默认情况下，一个

span

元素被呈现为一个

内联块，就像文本节点一样。它们围绕着子元素折叠（或者：它们占用子元素所需的空间，但仅此而已）

默认情况下，
div
元素呈现为
块
。除非其子元素不适合，否则它们会扩展到父元素的大小。如果
溢出
（实际上是
溢出-x
和
溢出-y
的缩写）为
自动
（默认），元素将展开，直到它的子元素适合为止。这将依次展开它的父元素，除非它们为
溢出
设置了其他值。如果
溢出
为
滚动
，则如果子元素不适合此元素，则不会展开元素，而是会显示滚动条。如果
>溢出
是
隐藏的
，元素将不会展开，但父元素之外的子元素（部分）将隐藏（这并不意味着您不能滚动元素，但没有可见的滚动条）


由于
内联块
与
高度：100%；
冲突，因此在渲染时忽略CSS样式。表格单元格的
显示
值为
表格单元格
或类似值。我不确定其行为。表格和布局总是一个麻烦的组合，以便在不同的浏览中获得一致的布局rs.在xhtml strict中验证您的文档通常有助于跨浏览器一致地显示您的文档。
在我的Firefox中，我看不出JSFIDLE和粉色部分之间有任何区别（最左边）正在改变，这可能与浏览器有关，我在Chrome上，我看到了一个不同点。我同意Ankit…在Firefox中没有任何区别，只是在Chrome上（其他尚未测试）好的，所以这是Chrome相关的，我想，更新了Op。问题是为什么要同时执行显示：阻塞和溢出：自动结果