10

ChromeとFirefoxのサイズbox-shadowが異なるのはなぜですか？

box-shadow: 0 0 4px #aaa inset;

クロム：
ここに画像の説明を入力してください

Firefox：
ここに画像の説明を入力してください

私はすでに次のことを試しましたが、最新のFirefoxでは機能しません。

-moz-box-shadow: 0 0 2px #aaa inset;
-webkit-box-shadow: 0 0 4px #aaa inset;

同じサイズのクロスブラウザボックスシャドウを作成するにはどうすればよいですか？

4

4 に答える 4

5

w3schoolsによると、ボックスシャドウには6つの値があります。

box-shadow: h-shadow v-shadow blur spread color inset;

ぼかしと広がりはオプションであり、色の前に3つの値しか定義していないため、2つのブラウザーの解釈が異なっていたと思います。

私はそれらを（少なくとも私の目には）同じように見せて、jsフィドルで次のようにしました：

-moz-box-shadow: 0px 0px 3px 0px #aaa inset;
-webkit-box-shadow: 0px 0px 5px 0px #aaa inset;

お役に立てれば

于 2012-06-24T11:35:37.733 に答える
3

FirefoxとChromeは異なるレンダラーを使用しており、それを回避する簡単な方法はありません。-moz-box-shadow動作しなくなったため、FFのみのスタイルを作成する別の方法が必要です。

.myThing {
    box-shadow: 0 0 4px #aaa inset;
}
@-moz-document url-prefix() { 
    .myThing {
        box-shadow: 0 0 2px #aaa inset;
    }
}

この回答も参照してください。

于 2015-07-15T09:46:26.570 に答える
0

私は同じ問題に直面しています。
すべてのブラウザの影が大きく、Webkitだけが小さいと考えてみてください。
したがって、解決策は次のとおりです。

box-shadow: 0 0 2px #aaa inset; /* for all browsers */
-moz-box-shadow: 0 0 2px #aaa inset; /* for old firefox */
-webkit-box-shadow: 0 0 4px #aaa inset; /* override for Chrome & Safari */

うまくいけば、ChromeとSafariは引き続きサポートし-webkit-box-shadowます。

于 2012-12-16T12:53:45.750 に答える
0

Chromeは長年にわたってバグがあるため、影は異なります： https ://bugs.chromium.org/p/chromium/issues/detail?id=179006

これはChrome73（2019年3月）で修正される予定です： https ：//www.chromestatus.com/feature/6569666117894144

クロスブラウザシャドウに対して実行できる最も簡単なことは、FirefoxまたはSafariで作成することです。Chrome73以降では正しく表示されます。

ボックスシャドウにプレフィックスハックを使用しないでください。Box-shadowは、2011年以降、すべてのブラウザで接頭辞が付いていません。

于 2019-01-08T13:30:10.723 に答える