css - 为什么 IE(和 Firefox 4)没有正确包装它？ (有布局？？)

Question

我有以下( http://jsfiddle.net/gVZwr/4/ ):

<div>
    <label>From</label>
    <span>Some Content Goes Here</span>
</div>

span {
    display: inline-block;
    overflow:hidden;
}

在 IE8/9 中，label 和 span 不对齐(label 低于 span)。

为什么？？？我可以通过在标签上放置 overflow:hidden 来修复它，但我想知道是什么原因造成的。我尝试了旧的“hasLayout”修复，例如将 zoom:1 放在标签上，但似乎没有什么可以修复它，特别是 overflow。

Answer 1

您的问题是 inline-block 元素的 overflow 设置为 visible 以外的任何内容，其基线位于框(实际上，框的底部边距)而不是在文本基线处有基线。参见 http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align最后一段。

那么基线，在你的情况下基本上对应于 span 边框的底部边缘，与 label 的基线对齐，这是实际的标签中文本的基线。因此，label 的文本在视觉上最终位于 span 的文本下方。

WebKit 不遵循此处的规范并且似乎不愿意更改它，因为存在依赖于其当前行为的特定于 WebKit 的非 Web 内容。这就是您在 WebKit 中看不到效果的原因。

根据规范，Opera 11 在此处执行与 IE 和 Firefox 相同的操作。

哦，就修复而言，您可以更改 label 的垂直对齐方式，或者删除 span 上的 overflow >，假设您确实需要 span 为 inline-block。