垂直对齐和内嵌块在chrome和Firefox中表现出令人讨厌的差异

Question

我目前正在努力解决问题，但是我似乎无法把握。

在导航的无序列表中，我想通过伪类之前的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>​

[我的最初想法是使两个元素（图标和a-tag）都显示：内联块，然后将图标与vertical-align：middle对齐。只需进行少量调整（从下到下），即可在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/

我尝试过在我看来是显示，垂直对齐和边距值的每种可能组合，以使其在两种浏览器中都能正确显示，最后，如果我给a-tag垂直对齐：中间和图标垂直对齐：baseline，它似乎可以工作：

.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> text </span>（整个框）变得高于其余文本，并且不会将text推到框<span>的上限。

这里的核心问题是，当涉及到Web标准时，Firefox非常文字化，而Chrome浏览器添加了一些类似的隐性功能。

For more details click here.

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

Answer 2

您的问题是，根据规格设置overflow:hidden会更改嵌入式块的基线位置。 Firefox实现了该规范所说的内容。 Chrome没有。

只要您的.list-item a是基线对齐的，它将在两种浏览器中呈现不同的效果。使渲染效果相同的唯一方法是确保您不将任何内联块与不可见的基线进行基线对齐，这是第二个代码粘贴的作用（在内联块上使用vertical-align: middle） 。

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;
}