13

我在 Chrome 和 Firefox 中测试了一个盒子阴影效果，我很惊讶地发现这两种浏览器之间的渲染存在巨大差异。值得注意的是，Firefox 的渲染要暗得多。下面是两张参考图：

铬合金 火狐

第一个图像在 Chrome 22 中渲染，后者在 Firefox 16 中渲染，两者都在 Mac OS 10.8.2 下运行。我不知道为什么这两个图像的渲染如此不同。这是盒子阴影本身，两种浏览器都一样：

box-shadow: 0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5);

对于现场演示，您可以在此处查看。将鼠标悬停在框上以获得效果。

有什么办法可以解决渲染中的这种巨大差异吗？

4

5 回答 5

4

您可以为 Firefox 创建一个媒体选择器，它将使用不同的样式。你将不得不玩弄它。例如，我减少了模糊、散布并提高了最后一个插入框阴影的不透明度。所以.box:hover的 CSS应该看起来像这样：

.box:hover {
  box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5));
}

@-moz-document url-prefix() {
.box:hover {
  box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 130px -120px rgba(0,0,0,0.9));
}
}

有关更多媒体选择器和其他浏览器技巧，您可以访问BrowserHacks.com

于 2013-09-13T13:18:28.557 回答
3

这是 Chrome 中长期存在的错误，已针对 Chrome 73（将于 2019 年 3 月推出）修复。

https://www.chromestatus.com/feature/6569666117894144

从历史上看，Blink 的模糊半径解释与 CSS 和 Canvas2D 规范不一致：Blink 阴影覆盖了大约一半的预期区域（参见链接的错误）。随着这一变化，高斯模糊 sigma 现在按照规范要求计算为 1/2 模糊半径。Blink 的影子实现现在可以匹配 FireFox 和 Safari。

注意：这个错误比从 WebKit 分叉 Blink 更早。Safari 曾经有一个不同的图形引擎。

https://bugs.chromium.org/p/chromium/issues/detail?id=179006

因此，通过这种变化保持外观的确切公式是
R' = 2 * (0.288675 * R + 0.5)

R' (new)     R (previously)
Chrome 73+   Chrome 72 and below
1.5px        1px
2px          2px
3px          3px
3px          4px
4px          5px
4.5px        6px

R' ≈ 0.7 * R       for R = 7px ... 12px
R' ≈ 0.6 * R       for R = 22px ... ∞
于 2019-01-08T02:53:48.180 回答
1

那是因为 Chrome 和 Firefox 使用不同的 html 渲染器。我认为这种剧烈的差异是由拉加颜色引起的，请尝试淡化阴影。

于 2013-11-21T19:09:41.357 回答
1

可能重置css会有所帮助：

http://codepen.io/anon/pen/IteyC

于 2013-12-11T08:02:47.753 回答
0

您正在使用多个框阴影，因此请尝试执行此操作（也从框阴影中删除 alpha 我在下面为您完成了此操作）

box-shadow: 0px 1px 3px rgba(0,0,0), 
            inset 0px 4px 2px -2px rgba(255,255,255), 
            inset 0px -3px 1px -2px rgba(0,0,0), 
            inset 0px -20px 200px -100px rgba(0,0,0);

-moz-box-shadow: 0px 1px 3px rgba(0,0,0), 
                 inset 0px 4px 2px -2px rgba(255,255,255), 
                 inset 0px -3px 1px -2px rgba(0,0,0), 
                 inset 0px -20px 200px -100px rgba(0,0,0);

-ms-box-shadow: 0px 1px 3px rgba(0,0,0), 
                inset 0px 4px 2px -2px rgba(255,255,255), 
                inset 0px -3px 1px -2px rgba(0,0,0), 
                inset 0px -20px 200px -100px rgba(0,0,0);

-webki-box-shadow: 0px 1px 3px rgba(0,0,0), 
                   inset 0px 4px 2px -2px rgba(255,255,255), 
                   inset 0px -3px 1px -2px rgba(0,0,0), 
                   inset 0px -20px 200px -100px rgba(0,0,0);

如果仍然有问题，你有任何小提琴或链接，所以我可以正确检查

于 2014-02-19T07:27:10.813 回答