FirefoxとChromeはボックスシャドウを全く異なった形でレンダリングしているようです

Question

ChromeとFirefoxの両方でボックスシャドー効果をテストしていましたが、2つのブラウザ間でレンダリングに劇的な違いが見られました。特に、Firefoxのレンダリングはと多くはとなっていました。

最初の画像は、クロム22でレンダリングされ、およびFirefox 16で後者はMac OS 10.8.2の下で実行両方：ここでは、2枚の参照画像です。私はなぜ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を見ることができます。効果を得るためにマウスの上にマウスを置く。

レンダリングのこの劇的な違いを解決する方法はありますか？

Answer 1

異なるスタイルを使用するFirefoxのメディアセレクタを作成できます。あなたはそれで遊ぶ必要があります。たとえば、ぼかしとスプレッドを減らし、最後のインセットボックスシャドウの不透明度を上げました。だから、■はのための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)); 
} 
} 

あなたはChromeとFirefoxが異なるHTMLレンダラを使用しているためだBrowserHacks.com

Answer 2

を訪問することができますハッキング。私は劇的な違いはラガの色が原因だと思って、代わりに影を消してみてください。

Answer 3

は、CSSが役立つリセットされるかもしれ：

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

Answer 4

あなたはので、これをやってみてください、複数のボックスシャドウを使用している

（また、私はあなたがしようとするために、以下の本を行っているボックスの影からアルファを削除します）

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

まだ問題が残っている場合は、そのためのフィドルまたはリンクがありますので、正しくチェックすることができます。