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）显示：inline-block并将图标与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和icon vertical-对齐：基线，似乎有效：

.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）仍然可以对齐它们。请注意，它是对齐的元素，而不是它的内容！因此，如果您将其应用于，则将与周围的文本对齐，而不是与其中的任何内容对齐。

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

添加span {vertical-align:top; border: 1px solid black}会使 text （整个框）变得高于文本的其余部分，而不是将text推到框的上限。

这里的核心问题是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;
}

vertical-align和inline-block在chrome和firefox中表现得非常不同

3 个答案: