4

我目前正在尝试解决一个问题，但我似乎无法理解它。

在导航的无序列表中，我想在伪类之前通过 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）显示：内联块并将图标与垂直对齐：中间对齐。只需稍作调整（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/

但我就是不明白。为什么第一个版本不起作用？对我来说，这似乎比实际工作的版本更合乎逻辑。两种浏览器中的哪一种没有以正确的方式呈现元素？

我已经找到了一个似乎对我有用的解决方案，所以这不是一个非常紧迫的问题，但是我不明白我的问题的核心（和解决方案）让我很烦恼，所以如果有人可以，我会非常感激启发我。

谢谢

4

3 回答 3

7

根据网络标准，只有内联元素可以“垂直对齐”，尽管某些浏览器，如 chrome，仍然对齐它们。请注意，对齐的是元素而不是其内容！因此，如果您将其应用于 a <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>它也可以。

于 2012-11-20T16:33:13.563 回答
6

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

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

于 2012-11-22T08:04:26.867 回答
0

试试这个：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;
}
于 2012-11-20T16:44:09.760 回答