firefox - Firefox と Chrome で境界線のある画像の境界半径が異なる

Question

これは画像で説明するのが一番です。

Firefox、右:

クロム、間違っています：

jsfiddle .

これは、2 ピクセル (赤) の境界線と 6 ピクセルの境界半径を持つ (完全に緑の) 画像です。私のデザインでは境界線がほとんど見えないため、画像は Chrome で完全に正方形に見えます。

追加のマークアップや JavaScript を使用せずに、Chrome で正しい結果を達成することは可能ですか?

Answer 1

Chrome でこれができるとは思えません。画像は の境界を超えて拡張されborder-radiusます。これは意図された動作だと思います (または、気付かなかっただけです)。

たとえば、 を使用するdivと、背景が本来の動作をすることがわかります。の代わりにを使用し、ソース画像を背景として使用するdivimgことを検討できます (およびその幅と高さを強制します)。

率直に言って: Chrome では、背景として設定されていない限り、画像自体 (またはそのコンテナー) の境界線によって画像を強制的に非表示にする方法はないようです。実際、この問題は以前に質問されており、ブログでも取り上げられています (実際、そこにあるpatrickzdbのコメントが役立つ場合があります)。

Answer 2

どうやらそれはクロムのバグです..

私は通常、ボーダーの代わりにクロムにボックスシャドウを適用します。

そのため、JavaScript を使用せずに CSS ハックを適用して回避する場合は、http: //jsfiddle.net/3cuHU/を参照してください。