vertical-align和inline-block在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>?

我的第一个想法是给两个元素(图标和标签)显示:内联块并将图标与vertical-align:middle对齐.只需很少的调整(margin-bottom),这在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 vertical-align:middle和图标vertical-align: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>.

这里的核心问题是,Firefox在Web标准方面非常直观,而Chrome则增加了一些隐含的功能.

有关详细信息,请单击此处

编辑:显然,如果你vertical-align:top只使用<a>它也有效.

Answer 2

您的问题是每个规范设置overflow:hidden更改内联块的基线位置.Firefox实现了规范所说的内容.Chrome没有.

因此,只要您.list-item a的基线对齐,它将在两个浏览器中呈现不同.使渲染相同的唯一方法是确保不对任何具有不可见溢出的内联块进行基线对齐,这是您的第二个代码粘贴所做的(它vertical-align: middle在内联块上使用).