我在Chrome和Firefox中测试了盒子阴影效果,我惊讶地发现两个浏览器之间的渲染有很大的差异.值得注意的是,Firefox的渲染比较暗.这里有两个参考图像：
第一个图像在Chrome 22中呈现,后者在Firefox 16中呈现,两者都在Mac OS 10.8.2下运行.我不知道为什么两个图像呈现如此不同.这是盒子本身,这两个浏览器是一样的：
Box-shadow: 0px 1px 3px rgba(0,0.3),inset 0px 4px 2px -2px rgba(255,255,0.7),inset 0px -3px 1px -2px rgba(0,inset 0px -20px 200px -100px rgba(0,0.5);
对于现场演示,您可以看到here.将鼠标悬停在框上以获得效果.
有什么办法可以解决渲染中的巨大差异吗？
解决方法
您可以为使用不同风格的Firefox创建一个媒体选择器.你必须玩弄它.例如,我减少了模糊,传播并提高了最后一个插入框阴影的不透明度.所以.Box的CSS：hover应该看起来像这样：
.Box:hover { Box-shadow(0px 1px 3px rgba(0,0.5)); } @-moz-document url-prefix() { .Box:hover { Box-shadow(0px 1px 3px rgba(0,inset 0px -20px 130px -120px rgba(0,0.9)); } }
对于更多的媒体选择器和其他浏览器黑客,您可以访问BrowserHacks.com
