1. "Penggunaan penting di IE6 dan FF"
.box1 {lebar:150px !penting;}
.box1 {lebar:250 piksel;}
!important artinya setting ini memiliki prioritas. IE tidak akan membuat error saat menemui !important dan mengabaikan fungsinya saja. Jika nanti lebarnya disetel, IE akan mengambil lebar yang disetel terakhir sebagai kriteria. itu akan Menggunakan nilai saat ini, yang merupakan nilai !penting sebelumnya. Misalnya: #test {width: 300px !important}Baik IE dan FF menampilkan 300PX. Jika ada nilai di akhir, IE akan menampilkan nilai berikut, dan FF akan menampilkan nilai dengan !import di depan!
Browser lain menganggap ini penting. Karena hubungan prioritas, lebar yang ditetapkan sebelumnya selalu berlaku.
#test {lebar:300px;lebar:400px !penting ;}
Hasil yang ditampilkan pada kalimat ini adalah lebar IE dan FF sama-sama 400PX
#test {lebar:300px !penting ;lebar:400px;}
Hasil tampilan kalimat ini adalah FF:300px YAITU:400px
Oleh karena itu, ketika menggunakan !important, letakkan kata yang mengandung !important di depan.
Tapi masalahnya datang lagi, IE7 sudah bisa mengenali! Penting, silakan lihat di bawah!
2. Gaya CSS untuk firefox ie6 ie7
Saat ini, kebanyakan dari mereka menggunakan !important untuk peretasan. Tes ie6 dan firefox dapat ditampilkan secara normal, tetapi ie7 dapat menafsirkan !important dengan benar, yang akan menyebabkan halaman tidak ditampilkan sesuai kebutuhan! Saya menemukan hack yang bagus untuk IE7 menggunakan "*+html". Sekarang jelajahi dengan IE7 dan seharusnya tidak ada masalah.
Sekarang tulis CSS seperti ini:
#1 { warna: #333 } /* Moz */
* html #1 { warna: #666 } /* IE6 */
*+html #1 { warna: #999 } /* IE7 */
Kemudian warna font ditampilkan sebagai #333 di bawah firefox, #666 di bawah IE6, dan #999 di bawah IE7. Anda dapat menggunakan "+" untuk mengimplementasikan CSS Hack yang hanya dikenali oleh IE. Beberapa teman mungkin berpikir untuk menggunakan "_" Hack , tetapi dibedakan karena "_" tidak dikenali di IE7. Jadi gunakan +
Hasil tes:
Browser IE5.5, IE6 dan IE7 dapat mengenalinya;
Browser FF2.0, Opera 9, dan Safari 2 tidak mengenalinya.
3. Peretasan IE7
IE7 telah memperbaiki banyak bug dan menambahkan dukungan untuk beberapa penyeleksi, jadi sekarang peretasan untuk menyembunyikan atau menampilkan IE seperti *html {}, html>body {}, !important, dll. tidak akan berfungsi di IE7. Meskipun CSS Hack tidak disarankan dan komentar bersyarat adalah filter yang sangat mudah, komentar bersyarat hanya dapat muncul dalam HTML, jadi CSS Hack masih ada tempatnya. Nanobot menemukan beberapa Peretasan CSS untuk IE7, khususnya:
>tubuh
html*
*+html
Dari ketiga metode penulisan ini, dua yang pertama adalah metode penulisan CSS ilegal dan diabaikan di browser yang memenuhi standar, namun menurut IE7 tidak demikian. Untuk >body, selector yang hilang akan diganti dengan selector global *, artinya akan diproses menjadi *>body, dan fenomena ini juga terjadi tidak hanya pada selector >, tetapi juga pada selector + dan ~. Untuk html*, karena tidak ada spasi antara html dan *, ini juga merupakan kesalahan sintaksis CSS, tetapi IE7 tidak akan mengabaikannya, tetapi secara keliru percaya bahwa ada spasi di sini. Untuk tipe ketiga *+html, IE7 percaya bahwa deklarasi DTD di depan html juga merupakan elemen, sehingga html akan dipilih. Di antara ketiga metode ini, hanya metode ini yang penulisan CSS legal, yang berarti dapat lolos validator. Oleh karena itu verifikasi juga merupakan penggunaan peretasan yang direkomendasikan oleh penulis.
Internet Explorer 6 dan di bawahnya
Gunakan *html {} untuk memilih elemen html.
IE 7 dan di bawahnya
Gunakan *+html, * html {} untuk memilih elemen html.
IE 7 saja
Gunakan *+html {} untuk memilih elemen html.
IE 7 dan browser modern saja
Gunakan html>body {} untuk memilih elemen body.
Hanya browser modern (bukan IE 7)
Gunakan html>/**/body {} untuk memilih elemen body.
4. IE dan FF memiliki interpretasi yang berbeda terhadap model kotak. Deskripsi kode: #test { width: 650px !important;width: 648px;padding-left:2px;background:#fff;
Bandwidth yang ditampilkan oleh pengujian adalah 650px
Total lebar IE Box adalah: jumlah dari lebar width+padding+border+margin. Total lebar FF Box adalah lebar dari lebar, dan lebar padding+border+margin termasuk dalam lebarnya.
Jika ada BOX{WIDTH:"300"; PADDING:"5PX";}, lebar BOX di IE seharusnya: 310. Lebar FF adalah 300, jadi ketika BOX terisi sebaiknya menggunakan BOX{WIDTH: "290"!IMPORTANT; WIDTH: "300";}, untuk memastikan lebar BOX selalu 300px, dan Tidak akan terjadi fenomena regangan, dan di FF tidak akan terjadi keadaan floating layer tidak terisi penuh.
5. Tag ul memiliki nilai padding di Mozilla, namun hanya margin yang memiliki nilai di IE.
Tetapkan ul{margin:0;padding:0}
6. IE tidak dapat membedakan perbedaan antara hubungan warisan dan hubungan ayah-anak.
7. Mengatur padding pada div di FF akan menyebabkan lebar dan tinggi bertambah, tetapi IE tidak (dapat diselesaikan dengan !important)
8. Masalah pemusatan
1. Pusatkan secara vertikal. Atur tinggi garis ke ketinggian yang sama dengan div saat ini, lalu teruskan perataan vertikal: tengah (Hati-hati jangan sampai membungkus konten.)
2. Margin terpusat secara horizontal: 0 otomatis; (tentu saja tidak universal)
3. Jika Anda perlu menambahkan gaya ke konten dalam tag a, Anda perlu mengatur display: block;
4. Perbedaan pemahaman BOX antara FF dan IE menyebabkan perbedaan 2px dan masalah seperti margin div disetel ke float dua kali lipat di bawah IE.\
5. Pertunjukan UL yang berbeda:
Tag ul memiliki gaya daftar dan padding secara default di bawah FF. Yang terbaik adalah mendeklarasikannya terlebih dahulu untuk menghindari masalah yang tidak perlu (Umumnya pada tag navigasi dan daftar konten)
6. Jangan atur ketinggian div sebagai pembungkus eksternal. Yang terbaik adalah menambahkan overflow: tersembunyi untuk mencapai adaptasi ketinggian.
9. Mengenai kursor tangan, ini hanya berlaku untuk IE. Jika IE dan FF mengenalinya, silakan gunakan kursor: penunjuk.