垂直对齐和内联块表现在铬和Firefox烦人不同(vertical-align and inline

我目前正在环绕一个问题我的大脑，但我似乎无法把握它。

在对导航无序列表，我想通过CSS伪类之前每个列表项前添加一个图标。

<ul class="list">
    <li class="list-item"><a href="#">one</a></li>
    <li class="list-item"><a href="#">two</a></li>
    <li class="list-item"><a href="#">three</a></li>
    <li class="list-item"><a href="#">four</a></li>
</ul>​

我首先想到的是，得到两个元素（图标和一个标签）显示：内联块和对准垂直对齐的图标：中间。 只需很少的调整（下边距），这非常适用于Chrome浏览器：

.list-item {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #F3F3F3;
    height:1.5em;
    overflow:hidden;
}

.list-item:before {
    display: inline-block;
    content: '';
    vertical-align: middle;
    background-color: red;
    width: 5px;
    height: 7px;
    margin: 0 4px 0.125em 5px;
}

.list-item a {
    display: inline-block;
    overflow: hidden;
    line-height: 1.5;
    height:1.5em;
}

但是，当你加载网页在Firefox中，图标是遥远的底部。 http://jsfiddle.net/pUhPB/4/

我试了一下在我看来显示，垂直对齐和边距值的每一个可能的组合，让它在两个浏览器的权利，最后，如果我给一个标签垂直对齐：中间和图标的垂直对齐：基线，它似乎工作：

.list-item {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #F3F3F3;
    height:1.5em;
    overflow:hidden;
}

.list-item:before {
    display: inline-block;
    content: '';
    vertical-align: baseline;
    background-color: red;
    width: 5px;
    height: 7px;
    margin: 0 4px 0 5px;
}

.list-item a {
    display: inline-block;
    vertical-align:middle;
    overflow: hidden;
    line-height: 1.5;
    height:1.5em;
}

http://jsfiddle.net/L3N3f/

但我只是不明白这一点。 为什么第一个版本无法正常工作？ 对我来说，似乎比那实际工作的版本更符合逻辑。 而这两种浏览器中的哪一个不再现元素的正确方法？

我已经发现，似乎为我工作的解决方案，所以它不是一个很迫切的问题，但它的错误我，我不明白我的问题的核心（和解决方案），因此，如果有人可以我会很感激见识一下这个。

谢谢

Answer 1:

据网络标准只内联元素可以“垂直对齐”，尽管一些浏览器，如Chrome，仍然对齐。 需要注意的是，对齐的元素，而不是它的内容！ 所以，如果你把它应用到一个<span>的<span>变得与周围文本对齐，而不是什么是它里面的范围内。

ispo lorem <span> text </span> due carpe diem

加入span {vertical-align:top; border: 1px solid black} span {vertical-align:top; border: 1px solid black}使得<span> text </span> （全框）变得比文本的其余部分更高的，而不是推text到箱的顶板<span> 。

这里的核心问题是，Firefox是非常字面，当涉及到的网络标准，而Chrome浏览器添加像这样的一些隐含功能。

欲了解更多详情请点击这里。

编辑：显然，如果你使用vertical-align:top仅在<a>它也适用。

Answer 2:

你的问题是，按规格设置overflow:hidden改变直列块的基线位置。 火狐实现了规范说什么。 Chrome不。

所以，只要你的.list-item a是基线对齐，它会在两个浏览器渲染不同。 使效果相同，唯一的方法是确保你没有基线对齐任何内嵌块与非可见溢出，这是你的第二个代码粘贴做什么（它使用vertical-align: middle的inline-块）。

Answer 3:

试试这个： http://jsfiddle.net/pUhPB/6/

我在这些情况下做的第一件事是在两个浏览器打开代码。 然后，我开始删除CSS代码，直到我可以看到这个问题。 卸下利润率和垂直对齐，这两种浏览器都呈现不同的代码。 所以，我一直保持到他们都是相同的移除代码。 一旦他们在两种浏览器一样，我后来改变了我所能做得到预期的效果。

这里是新的CSS：

.list-item:before 
{
    content: '';
    background-color: red;
    width: 5px;
    height: 7px;
    margin: 5px 4px 0 5px;
    float:left;
}

文章来源: vertical-align and inline-block behaving annoyingly different in chrome and firefox