Kalau bicara mekanisme pengolahan CSS, IE selalu punya banyak hal yang bikin orang muntah darah, tapi mereka tetap senang dengan perbaikannya saat ini.
Ambil dukungan untuk pseudo-class:hover sebagai contoh IE7+ akhirnya menambahkan dukungan untuk tag selain a. Tentu saja, kita harus memuji perbaikan tersebut, namun di bawah IE6, dukungan :hover untuk a tidak begitu memuaskan. Berikut ini adalah masalah yang ingin saya bicarakan secara singkat: melayang di IE6 dan browser sebelumnya.
Banyak orang mungkin sudah mengetahui beberapa masalah dengan :hover di IE6 dan browser sebelumnya (selanjutnya disebut IE6-). Saya terutama ingin membicarakan masalah seperti a:hover span{}.
Terkadang untuk menambahkan beberapa efek dinamis sederhana, kita sering menggunakan :hover untuk membantu. Misalnya, kita sering mengubah warna teks saat mouse melewati sebuah link. menyukai:
Ya, ini bisa dilakukan di semua browser. Namun jika Anda mengubahnya menjadi ini:
Anda akan menemukan bahwa tidak ada yang terjadi di IE6-, gaya kami tidak valid. Ya, itu saja. Banyak orang seharusnya mengalami masalah ini dan menyelesaikannya.
Ya, Anda hanya perlu menambahkan gaya a:hover{} lain untuk mengatasi masalah ini, yang bisa berisi zoom, padding, margin, dan atribut lainnya. sebagai berikut:
Melihat efek normal pulih, saya memikirkan apa yang mungkin menyebabkan :hover gagal. Anda dapat menggunakan zoom, display, padding, dan atribut lainnya untuk melakukannya, jadi saya pikir itu mungkin karena haslayout. Ya, mungkin itulah masalahnya. Namun jika Anda terus menguji, Anda akan menemukan bahwa atribut apa pun yang Anda tulis di a:hover{}, seperti warna, ukuran font, overflow (bahkan atribut yang tidak ada, seperti xx:yyy), Anda bisa memulihkannya.
Apakah Anda merasa sedikit terkejut setelah mengujinya di sini? Ya, saya juga seperti itu. Untuk alasannya saya belum tahu, mungkin ada yang tahu.
a:arahkan kursor{zoom:1;}
a:arahkan kursor{color:#F00;}
<a href="?">Ubah <em>warna</em></a> saya saat mengarahkan mouse
a:arahkan kursor{color:#F00;}
<a href="?">Ubah <em>warna</em></a> saya saat mengarahkan mouse
a:arahkan kursor{warna:#F00;}
<a href="?">Ubah warna saya saat mengarahkan mouse</a>