CSS与h1和跨度的双边框

我想重叠<span>的“边框底部”<h1>的边框底部以上。在谷歌浏览器和Opera工作正常，但在Firefox中有1个像素的差异。我尝试了很多方法，但在Firefox中看起来总是不一样。有没有什么办法可以在Firefox中改进这个或者使用其他方法不一定跨越？CSS与h1和跨度的双边框

对不起我的英语不好:(

我的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/

来源

2012-04-02 Adukuni

我看到了同样的结果在Firefox 11为Chrome和Opera ... – BoltClock 2012-04-02 23:59:05

我看到它在Firefox 11：http://desmond.imageshack.us/Himg641/scaled.php?server = 641＆filename = capturadepantalla201204.png＆res = medium – Adukuni 2012-04-03 00:02:20

好的。我想要的是（正如我在Chrome和Opera中看到的那样）：http://desmond.imageshack.us/Himg42/scaled.php?server=42&filename=capturadepantalla201204j.png&res=medium – Adukuni 2012-04-03 00:05:31

内嵌边框通常不刷新自己与他们的父块边界。鉴于不同的浏览器呈现内联小说不同的是，这最终不一致。

您可以解决这个特定的情况下，只要你的<span>内嵌块正常化边界的位置，然后让你的<span>一个-1px下边距移下来（或者更确切地说，拉<h1>边界上）：

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

Updated fiddle

来源

2012-04-03 00:08:22 BoltClock

它完美无缺！谢谢！我知道这不是最好的方法，但我不知道另一种技术可以达到我想要的效果。 – Adukuni 2012-04-03 00:16:52

CSS与h1和跨度的双边框

回答

相关问题