Firefox 无法正确渲染：border-radius、box-shadow 和border答案

【问题标题】：Firefox not rendering correctly with: border-radius,box-shadow and borderFirefox 无法正确渲染：border-radius、box-shadow 和border
【发布时间】：2017-12-12 18:30:29
【问题描述】：

在下面的例子中：

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

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

白色细边框可见于：

mozilla firefox
ie 11

它在以下位置不可见：

opera
safari
chrome

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

【问题讨论】：

您的代码需要在问题中（除非您的代码确实包含浏览器的名称）。请不要绕过质量过滤器。

标签： css internet-explorer firefox

【解决方案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*/
}

【讨论】：

【解决方案2】：

我遇到了类似的问题。即使我设置了

box-shadow:0 0 0 rgba(0,0,0,0);

只是因为我不想要那个元素的 box-shadow 并且我认为我可以像这样覆盖该属性。

这在 webkit 浏览器中可以正常工作，但 FF 仍然呈现薄阴影。

将css属性覆盖为其默认值的更好解决方案和最佳实践，显然是将其设置为默认值（愚蠢！）

box-shadow: none

【讨论】：