2

我有以下（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.

4

4 回答 4

5

您的问题是，设置为任何其他内容的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。

于 2011-05-19T06:22:33.583 回答
3

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

于 2011-05-19T00:44:57.363 回答
2

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

（而且，偏离主题，请参阅@josmh关于用途的答案<label>，即标记表单字段。）

于 2011-05-19T00:46:06.310 回答
0

这可能是因为 the<label>意味着绑定到某物。下面是一些例子。

于 2011-05-19T00:42:57.863 回答