为什么 IE（和 Firefox 4）不能正确包装这个？（有布局？？）答案

【问题标题】：Why does IE (and Firefox 4) not properly wrap this? (hasLayout??)为什么 IE（和 Firefox 4）不能正确包装这个？（有布局？？）
【发布时间】：2011-08-28 11:55:30
【问题描述】：

我有以下（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 之外似乎没有任何修复。

【问题讨论】：

仅供参考：我在 FF4 中尝试过，结果与 IE8 中的相同。但 Chrome 不同。
hasLayout 早已不复存在。我认为使用的最后一个版本是 IE 7。好吧，你可能仍然在 Quirks 和 Compatibility 模式下拥有它，但我希望你做在主要渲染模式下测试...
另请注意：将overflow:hidden 添加到标签本身并不能修复它。它还需要display:inline-block（至少在我的测试中）
@Joey - 我知道 hasLayout 早已不复存在，但这似乎是一个类似的渲染问题，因为在 IEoverflow:-anything- 会触发 hasLayout=true，我在这里看到overflow 正在导致浏览器进入不同的渲染模式......或其他东西。 @jwd - 谢谢，实际上我还没有在 FF 中测试过这个确切的案例。

标签： css internet-explorer-8 internet-explorer-9 haslayout

【解决方案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 .

【讨论】：

这正是我想要的正是，谢谢！

【解决方案2】：

同时制作<label> inline-block 怎么样？我认为inline-block 会影响元素的垂直对齐方式。

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

【讨论】：

确实，它似乎确实影响了span 元素的垂直对齐，因此我建议将其垂直对齐设置为bottom。删除 display 属性同样有效。

【解决方案3】：

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

【讨论】：

好的，你知道为什么 span 上的vertical-align:bottom 会导致 label 移动？另外，我对解决方案不是很感兴趣（正如我在 Q 中所说，我已经有了一个），但原因......尤其是现在我看到 FF 表现出相同的行为。
从外观上看（我添加了边框以使其更清晰），span 有一个不可见的margin-bottom 或vertical-align:-anything- 删除的东西......？（就像做许多其他事情一样......）
不完全是。正如 Paud D. Waite 所说，inline-block 显示会导致这种奇怪的行为。

【解决方案4】：

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

【讨论】：

<label> 确实应该与表单字段相关联，但我认为这不会导致布局问题。
是的，这是一个精简的例子。它绑定到实际用例中的某些东西，但这不是导致布局问题的原因。
@cwolves：出于兴趣，它是否与表单字段相关联？因为（IIRC）根据规范没有其他意义。
@Paul - 是的，实际代码更像：<div><label /><input /><span /></div>，为了简单起见，我只是将其剥离到上面的示例中。