为什么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 overflow元素设置为visible以外的任何其他元素的基线位于框的下边缘（实际上，框的下边距）而不是在文本基线处具有基线。见http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align最后一段。

然后，那个基本上对应于你情境中span边界的底边的基线与label的基线对齐，label是该文本的实际基线。标签。因此，span的文字最终会在label的文字下方结束。

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

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

哦，就修复而言，您可以更改overflow的垂直对齐，也可以取消span上的span，假设您确实需要inline-block 1}}为{{1}}。

Answer 2

尝试vertical-align：http://jsfiddle.net/gVZwr/2/

Answer 3

如何制作<label> inline-block呢？我认为inline-block会影响元素的垂直对齐。

（并且，偏离主题，请参阅@josmh’s answer了解<label>的用途，即标记表单字段。）

Answer 4

这可能是因为<label>应该是bound to something。以下是some examples。