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/