Meski topiknya terkesan mengagumkan, namun artikel ini bisa dikatakan sebagai hiburan bagi orang-orang yang sakit perut (seperti saya~)~ Biasanya developer punya caranya sendiri untuk bersantai. Berawal dari pertanyaan tentang batasan yang ditanyakan oleh seseorang xd di forum, jadi saya memutuskan untuk mencari tahu. Tidak butuh waktu lama untuk menulis artikelnya, namun butuh waktu lama untuk menyiapkan gambarnya. Pada artikel ini, mari kita lihat bagaimana setiap browser memahami batas.
Browser yang berpartisipasi dalam pengujian ini mencakup hampir semua browser di bawah Windows: ie6, ie7, ie8, ie9preview, chrome, firefox, safari, opera, seamonkey. Setiap versi adalah versi terbaru yang diunduh dari Internet. Dan karena pada pengujian ini performa IE678 konsisten, dan firefox serta seamonkey bersifat nepotisme, maka digabung menjadi IE8 dan firefox. Gambar di bawah ini adalah screenshot dari browser ini:
.jpg)
Perintah di atas memang disengaja. Alasannya akan ditunjukkan pada pengujian di bawah ini, dan tangkapan layar juga disusun dalam urutan ini.
Pertama lihat gambar di bawah ini. DIV 20X20 ditampilkan di enam browser, dengan batas atas: 2px dan sisanya 1px. Sepertinya tidak ada perbedaan. Ini karena kehalusan 1px menghalangi kita untuk memperhatikan. (Sebenarnya, kita tidak perlu peduli dengan seluruh masalah ini~)
.jpg)
Sederhanakan dulu masalahnya, satu sisi berukuran 2px, tiga sisi berukuran 1px, dan perbesar hasilnya 5 kali lipat. Kita dapat melihat dengan jelas perbedaan ini - Opera dan Safari bertolak belakang, IE8 tidak memiliki lengan dan kaki, dan tiga orang berikut ini konsisten ~ di sini. Perlu dicatat bahwa baris kedua dari 3 memiliki efek bertahap di persimpangan.
.gif)
Mungkin kita harus membuat efek ini lebih terlihat. Ketika hanya satu sisi yang dicetak tebal (10px), keunikan IE8 terungkap dengan jelas. opera dan safari masih relatif. Tiga front persatuan berikut ini secara bertahap menjadi lebih jelas.
.gif)