Mengapa Gelagat Jejari Sempadan Safari Berbeza daripada Pelayar Lain?

Ketidakkonsistenan Jejari Sempadan Penyemak Imbas: Gelagat Mengejutkan Safari

Dalam proses penggayaan tapak web, kami menghadapi isu yang sangat menyusahkan. Semasa membangunkan ciri yang memaparkan imej profil pengguna dengan sudut bulat, semuanya kelihatan berfungsi dengan lancar dalam Internet Explorer 8 dan ke atas, Google Chrome dan Mozilla Firefox. Walau bagaimanapun, Safari mempamerkan gelagat yang agak pelik.

Untuk menunjukkan isu ini, kami mencipta imej dengan sempadan 3px dan menggunakan jejari sempadan 50%. Semuanya kelihatan normal sehingga kami membuka halaman yang sama dalam Safari. Sempadan tidak kelihatan sebagai bulatan sempurna sebaliknya memenggal imej, membawa kepada kesan visual yang tidak diingini.

Setelah siasatan lanjut, kami menyedari bahawa tafsiran Safari tentang jejari sempadan berbeza daripada penyemak imbas lain. Semasa IE, Chrome dan Firefox memangkas sempadan dari tengah imej, Safari memangkasnya dari sempadan paling luar elemen. Perbezaan ini mengakibatkan pemangkasan imej itu sendiri yang tidak disengajakan.

Untuk menyelesaikan isu ini, kami melaksanakan penyelesaian yang memisahkan sempadan daripada imej. Dengan meletakkan imej dalam bekas, kami dapat menggunakan jejari sempadan pada kedua-dua imej dan bekas, memastikan kedua-duanya mempunyai bucu bulat.

Berikut ialah coretan kod HTML dan CSS yang membetulkan isu tersebut dalam 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;
}

Dengan pendekatan ini, Safari kini memaparkan imej profil pengguna dengan sempadan bulat yang sempurna, selaras dengan yang lain pelayar. Selain itu, anda boleh menguji penyelesaian ini dalam demo langsung kami untuk melihatnya dalam tindakan.

Atas ialah kandungan terperinci Mengapa Gelagat Jejari Sempadan Safari Berbeza daripada Pelayar Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!