为什么IE(和Firefox 4)没有正确包装这个？(hasLayout的??)

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中,标签和跨度不对齐(标签低于跨度).

为什么？？？我可以通过贴上overflow:hidden标签来修复它,但我想知道是什么导致它.我尝试了旧的"hasLayout"修复程序,例如zoom:1贴上标签,但似乎没有什么可以修复它,具体而言,overflow.

Answer 1

您的问题是设置为除了具有位于框的底部边缘(实际上是框的下边距)的基线以外的任何其他inline-block元素,而不是在文本基线处具有基线.请参阅http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align最后一段.overflowvisible

然后,基线对应span于您的情况下边界的下边缘与基线对齐,该基线label是标签中文本的实际基线.所以文本label最终在span视觉文本下面.

WebKit不遵循此处的规范,似乎不愿意改变它,因为WebKit特定的非Web内容依赖于其当前行为.这就是为什么你没有在WebKit中看到效果的原因.

根据规范,Opera 11在这里与IE和Firefox做同样的事情.

噢,并尽可能固定,你可以更改的垂直对齐label或取出overflow的span,假设你真正需要的span是inline-block.