css - Firefox 无法使用 : border-radius, 框阴影和边框正确呈现

Question

在下面的例子中:

http://jsfiddle.net/Du8f6/3/

我将内部阴影设置为容器和 10px 边框，边框半径设置为 50%。 结果是在容器边界外出现了奇怪的白色细边框。

白色细边框可见于:

mozilla firefox
ie 11

它在以下地方不可见:

opera
safari
chrome

欢迎提出解决此问题的任何建议。

Answer 1

这是因为边框的呈现方式:绘制在 div 上。这是另一个“半像素”问题，边框颜色与 div 背景颜色混合......看看 Border-radius: 50% not producing perfect circles in Chrome或 IE11 draws small line between positioned elements .这些不是同一个问题，但同源。

可能您更简单的解决方法是跳过 div 的边框宽度并使用新包装 div 的背景设置“假”边框:

在您的 html 中:

<div class="fakeborder"><div class="sub">Hm</div></div>

在你的 CSS 中:

.sub {
    ...
    border: 0px solid black;
    ... 
}

.fakeborder{
    margin:0;
    padding:10px;     /*The fake border width*/
    background:black; /*The fake border color*/
}