Mengapa Sudut Bulat Saya Tidak Betul dalam Safari, dan Bagaimana Saya Boleh Membaikinya?

Sudut Bulat (Jejari Sempadan) Dijelaskan Isu Safari

Apabila menggunakan CSS untuk mencipta sudut bulat dengan sifat jejari sempadan, isu yang tidak dijangka boleh timbul dalam Safari. Masalah ini amat ketara apabila cuba mengubah imej menjadi bulatan dengan sempadan.

Dalam Safari, penyemak imbas mengira jejari sempadan berdasarkan sempadan luar elemen, termasuk sebarang sempadan, bukannya pada imej itu sendiri.

Untuk menggambarkan ini, pertimbangkan imej (100px x 100px) dengan sempadan 3px, yang menghasilkan saiz elemen 106px x 106px. Menambah jejari sempadan 20% pada elemen ini memangkas imej dari tepi luar elemen, meninggalkan kawasan putih di sekelilingnya.

Tingkah laku ini menjadi lebih jelas pada nilai jejari sempadan yang lebih tinggi (mis., 50 %) dan apabila warna jidar ditetapkan kepada putih.

Untuk menyelesaikan isu ini dalam Safari, adalah perlu untuk menggunakan jejari sempadan pada kedua-dua imej dan elemen bekas:

<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;
}

Pemisahan ini memastikan jejari sempadan digunakan dengan betul pada imej dan elemen sekeliling, menghasilkan sempadan bulatan di sekeliling imej dalam Safari.

Atas ialah kandungan terperinci Mengapa Sudut Bulat Saya Tidak Betul dalam Safari, dan Bagaimana Saya Boleh Membaikinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!