ブラウザーの境界半径の実装全体で奇妙な動作を発見しました。次のコードをご覧ください: http://jsfiddle.net/pm7FZ/1/ Windows では、すべてのブラウザーの抜粋 Chrome は内側の画像を丸めます: http://imgur.com/54In8 Chrome は丸めず、画像は正方形のままです。
私は OS X を持っていませんが、友人がこれを送ってくれました: https://img.skitch.com/20120925-eypjk593tdest3ud9hcji1sauf.png動作が異なるようです。別の友人は、OS X で border-radius を 20px に設定すると、OS X バージョンの Firefox で画像の角が丸くなると言っています。
質問 - ここで何が起こっていますか? なぜそんなに矛盾するのか。
好奇心だけで「修正」するのは明らかに簡単です。
推測することしかできませんが、これが起こっていると思われることです。基本ボックス モデルの W3C 仕様 ( http://www.w3.org/TR/2007/WD-css3-box-20070809/ ) を確認すると、要素がどのように配置されているかを示す図が表示されます。各要素には、コンテンツ領域、パディング、ボーダー、およびマージン領域があります。ブラウザーはこれらの各領域をレイヤーとしてレンダリングし、FF がコンテンツ レイヤーの上に「境界レイヤー」をレンダリングする場合、Chrome は他のすべてのレイヤーの上に「コンテンツ レイヤー」をレンダリングすると思います。サンプルで、高さと幅の属性を削除する場合imgタグを使用すると、画像が丸みを帯びますが、境界線自体の影響を受けないことがわかります。ブラウザーがこれを処理する方法に関する仕様は見つかりませんでしたが、Chrome 開発者がパフォーマンスをさらに引き出すためにこの方法を選択したことは間違いありません。
