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

Question

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

以下代码段完全符合我在 Firefox 中的要求。然而，在 Chrome 中，边框似乎“消耗”了填充，使得文本背景颜色和下划线之间没有 space 剩余。

#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（或底部），导致一些不一致的 cross-browser 体验。您可以在几乎相同的问题上阅读更多内容：

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

How do I prevent the border of an element consuming its padding in Chrome?

html

css

google-chrome

chromium