Firefox和Chrome似乎完全不同地渲染了box-shadow

Question

我在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);

对于现场演示,您可以在这里看到.将鼠标悬停在方框上即可获得效果.

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

Answer 1

您可以为 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