Firefox无法正确渲染：border-radius，box-shadow和border [英] Firefox not rendering correctly with: border-radius,box-shadow and border

问题描述

在下面的示例中：

http：/ /jsfiddle.net/Du8f6/3/

我将内部阴影设置为容器，将10px边框设置为border-radius设置为50％。
结果是容器边框外面的薄白边框。

Im setting inner shadow to the container and 10px border with border-radius set to 50%. And the result is weired thin white border outside the container border.

在白色边框可见：

mozilla firefox
ie 11

及其在以下内容中不可见：

and its not visible in:

opera
safari
chrome

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

any suggestions for fixing this are welcome.

推荐答案

这是因为渲染边框的方式：绘制在div上。这是另一个半像素问题，边框颜色与div背景颜色混合......看看边界半径：50％不能在Chrome中生成完美的圆圈或 IE11在定位元素之间绘制小线。这些不是同一个问题，但具有相同的来源。

It's because the way the border is rendered: painted over the div. It's another "half pixel" issue and the border color mixs with the div background color... Take a look to Border-radius: 50% not producing perfect circles in Chrome or IE11 draws small line between positioned elements . Those are not the same issue, but have the same origin.

可能你更容易的解决方法是跳过div的边框宽度并设置一个假边框使用新包装器div的背景：

Probably your easier workaround is to skip out the border width of the div and set up a "fake" border using the background of a new wrapper 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*/
}

这篇关于Firefox无法正确渲染：border-radius，box-shadow和border的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！