为什么 Chrome 会让背景颜色与边框重叠？答案

【问题标题】：Why does Chrome let background colors overlap borders?为什么 Chrome 会让背景颜色与边框重叠？
【发布时间】：2016-03-07 21:41:53
【问题描述】：

当我在 Mac OS X 10.11.3 上的 Chrome 49.0.2623.75 中运行小提琴并调整页面以使三个彩色跨度重叠时，我惊讶地发现绿色背景与第一个红色跨度的边框重叠。 Firefox 保留了两者，没有重叠。从我的角度来看，这是不受欢迎的行为。这是一个错误吗？还有人为此烦恼吗？你有解决方法吗？谢谢！

HTML：

<p>Lorem ipsum dolor sit amet, <span class="bg_red border">consectetur adipiscing</span> elit. In ut sapien quam. Cras
    leo dui, ullamcorper sed magna ac, pretium finibus neque. Sed <span class="bg_green">rutrum aliquet aliquam</span>.
    Suspendisse quis dolor pharetra, interdum diam in, condimentum risus.
    <span class="bg_red border">Suspendisse maximus</span>, odio vitae iaculis suscipit, libero diam sagittis magna,
    non luctus eros lorem quis nisl. Donec at tristique felis. Nulla at dui dignissim, rutrum orci vitae, finibus
    neque.</p>

CSS：

.bg_green {
    background: green;
}

.bg_red {
    background: red;
}

.border {
    border: 4px solid black;
}

https://jsfiddle.net/oa59w1tx/

【问题讨论】：

“从我的角度来看，这是不受欢迎的行为。”期望的行为是什么？从我的角度来看，Chrome 和 FireFox 的重叠相似：imgur.com/Wommms7&nq3cL1k
阅读Stacking Conexts 的详细描述是否会影响您的愿望？显然，Chrome 遵循标准。
一种解决方法？当然，增加
的行高。但是……我也看不出 Mozilla 和 Chrome 之间的区别。
我认为这不是 chrome 的问题，它只是正常的 span 的 line-height 行为。如果你把它改成display-inline-block它是固定的，我想jsfiddle.net/oa59w1tx/2
@NenadVracar 成功了！非常感谢 :-) 奇怪的是 Firefox 默认会这样做吗？

标签： html css google-chrome background border

【解决方案1】：

p span{
     display:inline-block;
}

https://jsfiddle.net/oa59w1tx/3/

【讨论】：