CSS带有h1和span的双边框

Question

我希望在<span>的边框底部之上重叠<h1>的“边框底部”。在谷歌C​​hrome和Opera工作正常，但在Firefox中有1像素的差异。我尝试了很多方法但在Firefox中总是看起来不一样。有没有办法在Firefox中改进这个或使用其他方法不一定跨越？。

抱歉我的英语不好:(。

我的HTML：

<h1><span>My Title Test<span></h1>​

CSS：

h1 {
 border-bottom:1px solid #ccc; 

}
span{
border-bottom:1px solid #000; 
display: inline;
}

演示：http://jsfiddle.net/9WuBk/

Answer 1

内联边框通常不会使用其父块边框刷新自身。鉴于不同浏览器如何以不同方式呈现内联内容，这最终会导致不一致。

您可以通过使<span>内嵌块标准化边框的位置来解决此特定情况，然后为<span> -1px提供底部边距以将其向下移动（或者更确切地说，拉出<h1>边界）：

h1 {
    border-bottom:1px solid #ccc;
}
span {
    border-bottom:1px solid #000; 
    display:inline-block;
    margin-bottom:-1px;
}

Updated fiddle