如何防止元素的边框在 Chrome 中消耗其填充？

Question

我想要的是一个带有背景颜色的文本，在一些空间下方（例如，通过示例中的边框填充），然后是彩色下划线（通过示例中的边框底部）。

下面的 sn-p 正是我在 Firefox 中想要的。 然而，在 Chrome 中，边框似乎“消耗”了填充，使得文本背景颜色和下划线之间没有空间。

#test {
    background-color: red;
    border-bottom: 5px solid blue;
    padding-bottom: 5px;
    margin: 0px;
    background-clip: content-box;
    -webkit-background-clip: content-box;
}

<div>
  <span id="test">Test div</span>
</div>

这种行为是否记录在某处，更重要的是，有没有办法在 Chrome 中防止这种情况发生？

Answer 1

给span一个display:inline-block;，它会像在Firefox中一样工作。

#test {
    background-color: red;
    border-bottom: 5px solid blue;
    padding-bottom: 5px;
    margin: 0px;
    background-clip: content-box;
    -webkit-background-clip: content-box;
    display:inline-block;
}

<div>
  <span id="test">Test div</span>
</div>

解释：inline 元素往往不尊重 padding-top（或底部）导致一些不一致的跨浏览器体验。你可以阅读更多关于这个几乎相同的问题：Padding for Inline Elements