我想要的是一個帶有背景顏色的文本，在一些空間下面（例如通過示例中的邊框填充），然后是一個彩色下劃線（通過示例中的邊框底部）。
下面的代碼片段完全符合我在 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 中發生？
uj5u.com熱心網友回復：
給spana 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（或底部）導致一些不一致的跨瀏覽器體驗。您可以在這個幾乎相同的問題上閱讀更多內容：行內元素的填充
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/421602.html
標籤：
上一篇：使用bash腳本中curl中的變數更新MariaDB表
下一篇：《Java編程思想》讀書筆記一