我在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);
想要查看实时演示,请点击这里。将鼠标移到方框上即可看到效果。
有没有办法解决这种渲染上的巨大差异?