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/

---

OR 一种更优雅的解决问题的方法（不添加另外的div）可能会在相同背景颜色的框上添加阴影来“填充”那些白色可怕的东西，即

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