ホームページ >ウェブフロントエンド >CSSチュートリアル >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="http://placehold.it/100" /></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 サイトの他の関連記事を参照してください。