Mengapa Imej Pekeliling Saya Muncul Dipotong dalam Safari, dan Bagaimana Saya Boleh Membetulkannya?

Isu Sudut Bulat (Jejari Sempadan) dalam Safari

Pengguna Safari mungkin menghadapi tingkah laku yang pelik apabila cuba mencipta imej bulat menggunakan sempadan- sifat jejari. Isu ini berpunca daripada tafsiran unik Safari tentang pembundaran sempadan, yang berbeza daripada penyemak imbas lain.

Penjelasan Masalah:

Apabila menggunakan sempadan pada elemen, Safari mengembangkan elemen elemen dimensi untuk menampung lebar sempadan yang ditambah. Peluasan ini juga memberi kesan kepada penggunaan sudut bulat, menyebabkan ia memangkas dari sempadan luar elemen, bukan daripada imej yang terkandung.

Penyelesaian:

Untuk mengatasi isu ini, adalah penting untuk memisahkan sempadan daripada imej dengan meletakkan imej dalam bekas. Dengan berbuat demikian, anda boleh menggunakan jejari sempadan pada kedua-dua bekas dan imej, memastikan bentuk bulat yang konsisten.

Contoh Kod:

<div class="activity_rounded"><img src="image.jpg" /></div>

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

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

Dengan menggunakan teknik ini, anda boleh mencipta imej dengan sempadan bulat yang dipaparkan dengan betul dalam Safari dan mengekalkan keseragaman merentas pelayar yang berbeza.

Atas ialah kandungan terperinci Mengapa Imej Pekeliling Saya Muncul Dipotong dalam Safari, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!