Keserasian penyemak imbas untuk menyelesaikan pertukaran CSS HACK_Experience FF/IE6/IE7 khusus latar belakang

Sejak permulaan Internet, pertempuran antara pelayar tidak pernah berhenti. Sudah tentu, bahagian yang paling sukar adalah untuk pembangun halaman web Untuk memenuhi pengalaman pengguna dan standard kebolehgunaan, mereka perlu bekerja pada berbilang pelayar untuk kesan bersatu. Saya sangat berharap suatu hari nanti FF dapat menguasai dunia, walaupun kini IE masih menguasai dunia. Khususnya, keserasian CSS pelayar IE7 terbaru Microsoft sememangnya telah menambah beban baru yang berat kepada beberapa pengeluar halaman web.
Untuk mempunyai kesan paparan yang sama merentas penyemak imbas, kami perlu menggunakan CSS HACK. Sudah tentu, dalam artikel ini kita hanya bercakap tentang IE6 dan FF yang paling biasa digunakan, serta CSS HACK IE7 yang mungkin menjadi arus perdana pada masa hadapan Bagi versi di bawah IE6 iaitu OP dan SF, saya tidak akan menerangkan mereka secara terperinci di sini. Orang baru pasti akan mendapat sesuatu daripada membaca artikel ini, dan pakar hanya boleh lalu dan membacanya, haha!

Pilihan 1
Mula-mula lihat kod CSS berikut:

warna latar:oren;
*warna latar:biru!penting; - warna:merah;

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Ujian css Laman Utama Skrip-www.jb51.net<title> </title> <style type="text/css"> .bgc{ width:200px; height:200px; background-color:orange; *background-color:blue!important; *background-color:red; } </style> <div class="bgc"> </div>
[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakannya ]

Saya akan menerangkannya secara ringkas di bawah Bagaimana setiap pelayar memahami ketiga-tiga atribut ini:
Di bawah FF, atribut kedua dan ketiga tidak dikenali Jika atribut kedua hanya ditambah dengan !important, FF pasti akan mengenalinya, tetapi kerana atribut lain ditambahkan sebelum *, jadi saya tidak mengenalinya (hanya IE7 yang mengenalinya). Jadi apa yang dibaca ialah background-color:oren;
Di bawah IE7, walaupun IE7 mengenali atribut pertama, kedua dan ketiga, !important bermaksud keutamaan, jadi apa yang dibaca ialah *background-color:blue !important; >Di bawah IE6, atribut kedua tidak dikenali, tetapi atribut pertama dan ketiga diiktiraf Walau bagaimanapun, kerana atribut ketiga menimpa atribut pertama, akhirnya IE6 membaca *warna latar belakang: merah.

Pilihan 2
Mula-mula lihat kod CSS berikut:

Salin kod Kod adalah seperti berikut:

warna latar:oren;

*warna latar belakang:biru;

skrip ujian css home-www.jb51.net

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style type="text/css"> .bgc{ width:200px; height:200px; background-color:orange; *background-color:blue; _background-color:red; } </style> <div class="bgc"> </div>[Ctrl+A untuk memilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semulanya untuk melaksanakan ]
Biar saya terangkan secara ringkas cara setiap penyemak imbas memahami ketiga-tiga atribut ini:
Di bawah FF, FF tidak mengenali atribut kedua dan ketiga, jadi ia berbunyi background-color:oren
Dalam FF Di bawah IE7, yang ketiga atribut IE7 tidak mengenali, jadi ia membaca atribut pertama dan kedua Dan kerana atribut kedua merangkumi atribut pertama, IE7 akhirnya membaca atribut kedua *warna latar: biru
Di bawah IE6, IE6 mengenali ketiga-tiga atribut ini. jadi ketiga-tiga atribut boleh dibaca Dan kerana atribut ketiga menimpa dua atribut pertama, IE6 akhirnya membaca _background-color.

Pastikan mengetahui atribut bacaan IE Ini sangat penting untuk pemula untuk menggunakan CSS HACK Penyemak imbas membaca atribut dari atas ke bawah, yang bermaksud atribut yang sama Tetapkan yang terakhir dibaca untuk dipaparkan pada. pelayar. Di samping itu, "_" dalam skema kedua hanya diiktiraf oleh IE6, yang menunjukkan bahawa ia berasa seperti pemakan besar. Selain itu, !important adalah berbeza Ia memecahkan tabiat membaca atas ke bawah dan menggunakan paparan keutamaan. Daripada dua penyelesaian di atas, dapat dilihat bahawa FF tidak mengenali apa-apa kecuali penulisan CSS biasa dan !penting, dan piawaian disatukan.

Ini bukan untuk menggalakkan semua orang menggunakan CSS HACK, tetapi jangan lihat HACK ini dalam kod CSS yang ditulis oleh orang lain dan tidak tahu maksudnya. Lagipun, menggunakan CSS HACK untuk menyelesaikan masalah keserasian antara penyemak imbas bukanlah penyelesaian jangka panjang Jika versi baharu penyemak imbas muncul, ia mungkin MENGGODA CSS yang anda tulis pada asalnya. Cuba gunakan CSS HACK sifar atau kurang, kerana struktur susun atur yang baik boleh menyelesaikan masalah ini dengan baik, dan terdapat banyak laman web seperti ini.