Chrome 和 Firefox 中相同框阴影大小的不同输出答案

【问题标题】：Different output for same box-shadow size in Chrome and FirefoxChrome 和 Firefox 中相同框阴影大小的不同输出
【发布时间】：2019-01-08 21:30:10
【问题描述】：

为什么 Chrome 和 Firefox 中 box-shadow 的大小不同？

box-shadow: 0 0 4px #aaa inset;

Chrome：

火狐：

我已经尝试了以下方法，但它在最新的 Firefox 中不起作用。

-moz-box-shadow: 0 0 2px #aaa inset;
-webkit-box-shadow: 0 0 4px #aaa inset;

我怎样才能使跨浏览器框的阴影大小相同？

【问题讨论】：

如果你在两个前缀版本之后有无前缀的box-shadow，那显然是行不通的......
至于为什么输出不同的原因……我不知道。
你能把这段代码写成jsfiddle到我们也可以编辑和解释我们的系统吗>
@BoltClock，伙计，谢谢。但我知道第一个。
@Arpit Srivastava，这是您的fiddle，但您需要通过 Firefox 和 Chrome 打开它。我添加了box-shadow: 0 0 2px #aaa inset;，它在最新的 Firefox 和 Chrome 中运行良好。但我需要更多地测试它。

标签： html css cross-browser

【解决方案1】：

w3schools says there are 6 values to box shadow:

box-shadow: h-shadow v-shadow blur spread color inset;

模糊和扩散是可选的，我猜你只在颜色之前定义了三个值，这两个浏览器的解释不同。

我让它们看起来与 js fiddle 上的以下内容相同（至少在我看来）：

-moz-box-shadow: 0px 0px 3px 0px #aaa inset;
-webkit-box-shadow: 0px 0px 5px 0px #aaa inset;

希望对你有帮助

【讨论】：

这并没有解决相同的box-shadow 样式在 Webkit 和 Gecko 之间应用不同的阴影传播大小的问题。真的很令人沮丧，尤其是现在不再支持 -moz-box-shadow，所以不再可能以这种方式隔离 Firefox！
6 年前可能有所不同，但行为上的差异仍然存在，并且更改 spread 参数不会影响 Firefox 中的 box-shadow。这意味着您的猜测是错误的，如果现在的行为与您回答时的行为相同。你当时测试过这个吗？

【解决方案2】：

Firefox 和 Chrome 使用不同的渲染器，并且没有简单的解决方法。由于-moz-box-shadow 不再有效，您需要a different way to write a FF-only style：

.myThing {
    box-shadow: 0 0 4px #aaa inset;
}
@-moz-document url-prefix() { 
    .myThing {
        box-shadow: 0 0 2px #aaa inset;
    }
}

另见this answer。

【讨论】：

是的，这是 Chrome 中的一个错误（问题 179006）。很快将在 Chrome 73 中修复。

【解决方案3】：

我也遇到了同样的问题。
试着认为所有浏览器都有更大的影子，只有 webkit 有更小的影子。
所以解决方案是：

box-shadow: 0 0 2px #aaa inset; /* for all browsers */
-moz-box-shadow: 0 0 2px #aaa inset; /* for old firefox */
-webkit-box-shadow: 0 0 4px #aaa inset; /* override for Chrome & Safari */

希望 Chrome 和 Safari 将继续支持-webkit-box-shadow。

【讨论】：

第四个参数是解决方案兄弟。检查以前的答案。

【解决方案4】：

阴影是不同的，因为 Chrome 多年来一直存在缺陷： https://bugs.chromium.org/p/chromium/issues/detail?id=179006

这预计将在 Chrome 73（2019 年 3 月）中得到修复： https://www.chromestatus.com/feature/6569666117894144

您可以为跨浏览器阴影做的最简单的事情就是使用 Firefox 或 Safari 创建它。 Chrome 73 及更高版本将正确显示。

请不要对 box-shadow 使用 prefix-hacks。自 2011 年以来，Box-shadow 在所有浏览器中都没有前缀。

【讨论】：