Firefox：边框颜色，边框半径和背景颜色创建不齐的边缘和空白区域

Question

请看下面的HTML和CSS。

.box { 
    border-radius: 15px; 
    border: #333 solid 3px; 
    background: #333; 
} 

<div class="box">Hello world</div> 

它产生这样在Firefox：

正如你所看到的，边框和div的背景留下一个微小的差距是明显的。由于具有不同背景颜色的悬停状态，我需要边框。

我该如何克服这个问题？

Answer 1

这很可能是Firefox中的一个错误。你可以做一个简单的技巧来解决这个问题：（这不是最好的解决办法，我知道，但这个问题似乎很严重）

标记：通过“包装”的div

<div class="wrapper"> 
    <div class="box">Hello world</div> 
</div> 

假的边界

CSS：填充的伎俩

.wrapper { 
    border-radius: 15px; 
    background: #333; 
    padding:3px; /*simulating border*/ 
} 
.box { 
    border-radius: 15px; 
    background: #333; 
} 

http://jsfiddle.net/steweb/peYRf/

---

或一个更优雅的方式来解决问题（不添加其他格）可以在相同的背景色，以“填充”说白了可怕的东西的盒子来添加阴影，即

.box { 
    border:3px solid #333; 
    border-radius: 15px; 
    background: #333; 
    -moz-box-shadow:0px 0px 1px #333; /* just on ffox */ 
} 

http://jsfiddle.net/steweb/Sy2rr/