Firefox和Chrome似乎呈现出明显不同的箱形阴影

我在Chrome和Firefox中测试了一个盒子阴影效果，我惊讶地发现两个浏览器之间呈现的效果有很大的不同。值得注意的是，Firefox的渲染效果是太多了，而较暗。这里有两个参考图像：Firefox和Chrome似乎呈现出明显不同的箱形阴影

Chrome Firefox

第一图像是在铬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);

对于现场演示，你可以看到here。将鼠标悬停在该框上即可获得该效果。

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

来源

2012-10-21 Alexis King

这已经是一个相当长的一个问题。我仍然不知道是什么导致它：http://stackoverflow.com/questions/11167516/different-output-for-same-box-shadow-size-in-chrome-and-firefox – BoltClock

我的猜测是，这是浏览器公司设计的一个组件。例如，Alert弹出窗口在不同的浏览器中看起来非常不同。如果你想拥有相同的外观，我认为你必须自己绘制和编码。 – user1894606

您可以为Firefox使用不同的风格创建媒体选择器。你将不得不玩弄它。例如，我减少了模糊，扩散并且提高了最后一个插入的阴影的不透明度。所以对于.box的的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-13 13:18:28 thexpand

我想，使用每个浏览器的前缀将是足够的，所以没有理由为此使用黑客。 – xpy

@xpy你能举个例子吗，因为我无法理解你？ – thexpand

我做了一个小提琴的例子：http://jsfiddle.net/pavloschris/hkJkG/即使有一个前缀属性的前缀，铬使用前缀之一，其他浏览器将使用前缀。 – xpy

这是因为Chrome和Firefox使用不同的HTML渲染器。我认为这种巨大的差异是由拉格色造成的，请尝试淡化阴影。

来源

2013-11-21 19:09:41 doory

可能被重置的CSS将帮助：

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

来源

2013-12-11 08:02:47 mosa1991

请尝试阅读本文http://stackoverflow.com/help/deleted-answers，以获得更多了解如何**不**回答。即：“不能从根本上回答问题的答案”：**仅仅是一个链接到外部网站** –

您正在使用多个盒子阴影所以尝试做这个（还从盒子阴影阿尔法我在下面做了这个给你试用）

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-19 07:27:10

Firefox和Chrome似乎呈现出明显不同的箱形阴影

回答

相关问题