为什么Chrome让背景颜色重叠边框？

Question

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

HTML：

createfile(filename,$1FF,0,nil,2,128,0)

CSS：

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

https://jsfiddle.net/oa59w1tx/

Answer 1

p span{
     display:inline-block;
}

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