Firefox和Chrome似乎渲染盒子阴影完全不同 [英] Firefox and Chrome seem to render box-shadow quite differently
问题描述
我在Chrome和Firefox中测试了一个box-shadow效果,我惊讶地发现两个浏览器之间的渲染有很大的不同。值得注意的是,Firefox的呈现很多更暗。以下是两个参考图片:
I was testing a box-shadow effect in both Chrome and Firefox and I was surprised to see a drastic difference in rendering between the two browsers. Notably, Firefox's rendering was much darker. Here are two reference images:
第一张图片在Chrome 22中呈现,后者在Firefox 16中,都在Mac OS 10.8.2下运行。我不知道为什么两个图像渲染这么不同。这里是盒子阴影本身,两个浏览器相同:
The first image is rendered in Chrome 22, and the latter in Firefox 16, both running under Mac OS 10.8.2. I have no idea why the two images are rendering so differently. Here's the box shadow itself, same for both browsers:
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);
对于现场演示,您可以看到此处。
For a live demo, you can see here. Mouse over the box to get the effect.
有什么办法可以解决这种巨大的渲染差异吗?
Is there any way I can fix this drastic difference in rendering?
推荐答案
您可以为Firefox创建一个使用不同样式的媒体选择器。你必须玩弄它。例如,我减少了模糊,扩散,并调高了最后一个插入盒阴影的不透明度。因此, .box:hover 的CSS应该看起来像这样:
You can create a media selector for Firefox which will be using a different style. You will have to play around with it. For example, I reduced the blur, the spread and turned up the opacity of the last inset box-shadow. So the CSS for the .box:hover should probably look something like this:
.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
For more media selectors and other browser hacks you can visit BrowserHacks.com
这篇关于Firefox和Chrome似乎渲染盒子阴影完全不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!