html - Chrome 和 Firefox 中相同框阴影大小的不同输出

Question

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

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

铬合金：

火狐：

我已经尝试了以下方法，但它不适用于最新的 Firefox。

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

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

Answer 1

w3schools 说 box shadow 有 6 个值：

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

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

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

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

希望这可以帮助

Answer 2

Firefox 和 Chrome 使用不同的渲染器，并且没有简单的解决方法。由于-moz-box-shadow不再有效，您需要一种不同的方式来编写纯 FF 样式：

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

另请参阅此答案。

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

Answer 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 使用前缀黑客。自 2011 年以来，Box-shadow 在所有浏览器中都没有前缀。