为什么IE (和Firefox4)不能正确地包装它？(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

您的问题是，overflow设置为visible以外的任何值的inline-block元素的基线都在框的底部边缘(实际上是框的下边距)，而不是文本基线。参见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。

Answer 2

尝试垂直对齐：http://jsfiddle.net/gVZwr/2/

Answer 3

把<label> inline-block也做出来怎么样？我认为inline-block会影响元素的垂直对齐方式。

(离开主题，请参阅@josmh’s answer，了解<label>的用途，即标签表单域。)