在 chrome 和 firefox 中，vertical-align 和 inline-block 的行为令人讨厌

Posted 2023-03-06

【中文标题】在 chrome 和 firefox 中，vertical-align 和 inline-block 的行为令人讨厌

【英文标题】：vertical-align and inline-block behaving annoyingly different in chrome and firefox

【发布时间】：2012-11-08 18:10:25

【问题描述】：

我目前正在努力思考一个问题，但我似乎无法理解它。

在导航的无序列表中，我想在伪类之前通过 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 并将图标与垂直对齐：中间对齐。只需稍作调整（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-对齐：基线，它似乎工作：

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

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

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

谢谢

【参考方案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 添加了一些类似这样的隐含功能。

For more details click here.

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

【讨论】：

这确实有助于我更好地理解问题，非常感谢。

【参考方案2】：

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

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

【参考方案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;

【讨论】：

建议使用 float 而不是 inline-block 是在回避这个问题。