vertical-align和inline-block行为在chrome和firefox中有着令人不安的不同 [英] vertical-align and inline-block behaving annoyingly different in chrome and firefox

问题描述

我目前正试图把我的大脑包围一个问题，但我似乎无法掌握它。

I am currently trying to wrap my brain around a problem, but i can't seem to grasp it.

在导航的无序列表中，我想在每个列表项之前通过css在pseudo类之前添加一个图标。

In an unordered list for a navigation, i want to add an icon before every list item via css before pseudo class.

<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）显示：inline-block并将图标与vertical-align：middle对齐。只需稍微调整（margin-bottom），即可在chrome中使用：

My first thought was to give both elements (the icon and the a-tag) display:inline-block and align the icon with vertical-align:middle. With just little adjustments (margin-bottom), this works well in 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/

But when you load the page in firefox, the icon is way off at the bottom. http://jsfiddle.net/pUhPB/4/

我试过在我看来，每一个可能的组合display，vertical-align和margin-values在两个浏览器得到它，最后，如果我给一个标签vertical-align：middle和图标vertical-align：baseline，它似乎工作：

I tried what seems to me every possible combination of display, vertical-align and margin-values to get it right in both browsers, and finally, if i give the a-tag vertical-align:middle and the icon vertical-align:baseline, it seems to work:

.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/

但我只是不知道。为什么第一个版本不工作？对我来说，它似乎比实际工作的版本更合乎逻辑。两个浏览器中哪一个不能正确渲染元素？

But i just don't get it. Why does the first version not work? To me, it seems way more logical than the version that actually works. And which one of both browsers doesn't render the elements the right way?

我已经找到一个似乎为我工作的解决方案，所以这不是一个非常紧急的问题，但它错了我，我不明白我的问题的核心（和解决方案），所以我会真的感谢，如果有人可以启发我这一点。

I already found a solution that seems to work for me, so it's not a very urgent question, but it bugs me that i don't understand the core of my problem (and the solution), so i would be really thankful if someone could enlighten me on this.

感谢

推荐答案

根据网络标准， 垂直对齐，尽管一些浏览器，如chrome，仍然对齐它们。注意，它是对齐的元素，而不是它的内容！
因此，如果将它应用于< span> ，则< span>

According to web standard only inline elements can be "vertically aligned" in spite that some browsers, like chrome, still align them. Note that it is the element that is aligned and not it's contents! So if you apply it to a <span> the <span> becomes aligned with the surrounding text and not whatever is inside it within in.

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

添加 span {vertical-align：top; border：1px solid black} 使< span>文本< / span> （整个框）变得高于文本的其余部分，而不是将文本 code>< span> 。

adding span {vertical-align:top; border: 1px solid black} makes <span> text </span> (whole box) become higher than the rest of the text and not push the text to the ceiling of the box <span>.

这里的核心问题是，当涉及到web标准时，Firefox是非常字面的，而Chrome添加了一些隐式的功能，像这样。

The core issue here is that Firefox is very literal when it comes to web standard whilst Chrome adds a few implicit features like this one.

详情请点击这里

编辑：显然如果你在< a> 上使用 vertical-align：top 它也工作。

apparently if you use vertical-align:top ONLY on the <a> it also works.

这篇关于vertical-align和inline-block行为在chrome和firefox中有着令人不安的不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！