Efek di IE
Efek di Mozilla Firefox
Hal ini disebabkan oleh bug dalam interpretasi IE tentang jarak antar kotak (lihat "Masalah dengan Model Mengambang" di onetab). Saya tidak pernah memecahkan masalah ini sampai saya menerjemahkan "Tabel vs. CSS--Pertempuran Hidup dan Mati". Tip dari penulis membantu saya menemukan solusi: gunakan !important.
!important adalah sintaks yang didefinisikan dalam CSS1. Fungsinya adalah untuk meningkatkan prioritas penerapan aturan gaya yang ditentukan (lihat: penjelasan W3.org). Format sintaksis { sRule!important } ditulis di akhir definisi, misalnya:
kotak{warna:merah !penting;}
Hal yang paling penting adalah: IE tidak pernah mendukung sintaksis ini, tetapi browser lain mendukungnya. Oleh karena itu, kita dapat menggunakan ini untuk mendefinisikan gaya yang berbeda untuk IE dan browser lainnya. Misalnya, kita mendefinisikan gaya seperti ini:
.tes warna {
batas:20px padat #60A179 !penting;
batas:20 piksel padat #00F;
bantalan: 30 piksel;
lebar: 300 piksel;
}
Saat browsing di Mozilla, Anda dapat memahami prioritas !penting, sehingga warna #60A179 ditampilkan:
Saat browsing di IE, prioritas !important tidak dipahami, sehingga warna #00F ditampilkan:
Seperti yang Anda lihat, dengan menggunakan !important, kita dapat mengatur gaya yang berbeda untuk browser IE dan non-IE, cukup tambahkan !important setelah gaya browser non-IE. Oleh karena itu, perbedaan tampilan 2px di beranda saya yang disebutkan di atas dapat dengan mudah diatasi:
PADDING-ATAS: 11px !penting;
PADDING-ATAS: 9px;
!important pasti akan menjadi alat yang ampuh untuk tata letak CSS, harap ingat dan kuasai :)
