Safari の境界半径の動作が他のブラウザと異なるのはなぜですか?

ブラウザの境界線の半径の不一致: Safari の驚くべき動作

Web サイトのスタイルを設定する過程で、特に問題のある問題に遭遇しました。角が丸いユーザー プロフィール画像を表示する機能を開発している間、すべてが Internet Explorer 8 以降、Google Chrome、および Mozilla Firefox でシームレスに動作するように見えました。ただし、Safari はかなり特異な動作を示しました。

この問題を実証するために、3 ピクセルの境界線を持つ画像を作成し、境界線の半径 50% を適用しました。 Safari で同じページを開くまでは、すべてが正常に見えました。境界線は完全な円として表示されず、画像が切り詰められ、望ましくない視覚効果が生じていました。

さらに調査したところ、Safari の境界線の半径の解釈が他のブラウザーとは異なることがわかりました。 IE、Chrome、Firefox では画像の中心から境界線が切り取られましたが、Safari では要素の最も外側の境界から境界線が切り取られました。この区別により、画像自体が意図せず切り詰められてしまいました。

この問題を解決するために、境界線を画像から分離する回避策を実装しました。画像をコンテナ内に配置することで、画像とコンテナの両方に境界線の半径を適用して、両方の角を丸くすることができました。

次は、問題を修正した HTML と CSS コードのスニペットです。 Safari:

<div class="activity_rounded"><img  src="/static/imghwm/default1.png" data-src="http://placehold.it/100" class="lazy" alt="Safari の境界半径の動作が他のブラウザと異なるのはなぜですか?" ></div>

.activity_rounded {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    border: 3px solid #fff;
}

.activity_rounded img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    vertical-align: middle;
}

このアプローチにより、Safari は他のブラウザーと同じように、ユーザー プロフィール画像を完全な円形の境界線で表示するようになりました。さらに、このソリューションをライブ デモでテストして、実際の動作を確認することができます。

以上がSafari の境界半径の動作が他のブラウザと異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。