Gunakan !important untuk menyelesaikan perbezaan reka letak antara IE dan Mozilla_CSS/HTML

Apabila mereka bentuk halaman "Web Designer", terdapat masalah yang mengganggu saya Kesan paparan menu utama dalam IE dan pelayar lain (Mozilla, Opera, dll.) mempunyai sisihan sebanyak 2px. Tangkapan skrin adalah seperti berikut:

Kesan dalam IE

Kesan dalam Mozilla Firefox

Ini disebabkan oleh pepijat dalam tafsiran IE tentang jarak antara kotak (rujuk kepada " Masalah model terapung " onestab). Saya tidak pernah menyelesaikan masalah ini sehingga saya menterjemah " Jadual vs. CSS--Pertempuran hidup dan mati " Petua daripada pengarang membantu saya mencari penyelesaian: gunakan !penting.

!important ialah sintaks yang ditakrifkan dalam CSS1, yang digunakan untuk meningkatkan keutamaan aplikasi peraturan gaya yang ditentukan (lihat: Penjelasan W3.org ). Format tatabahasa { sRule!important }, yang ditulis pada penghujung takrif, contohnya:

Perkara yang paling penting ialah: IE tidak pernah menyokong sintaks ini, tetapi pelayar lain menyokongnya. Oleh itu, kita boleh menggunakan ini untuk menentukan gaya yang berbeza untuk IE dan penyemak imbas lain Sebagai contoh, kita mentakrifkan gaya sedemikian:

.colortest { 
border:20px solid #60A179 !important;
border:20px solid #00F;
padding: 30px;
width : 300px;
} 

Apabila menyemak imbas dalam Mozilla, anda boleh memahami keutamaan !important, jadi warna #60A179 dipaparkan:

Apabila menyemak imbas dalam IE, keutamaan !important tidak difahami, jadi warna #00F dipaparkan:

Seperti yang anda lihat, menggunakan !important, kami boleh menetapkan gaya yang berbeza untuk pelayar IE dan bukan IE. Cuma tambahkan !important selepas gaya penyemak imbas bukan IE. Oleh itu, perbezaan paparan 2px pada halaman utama saya yang disebutkan di atas boleh diselesaikan dengan mudah:

PADDING-TOP: 11px !penting;
PADDING-TOP: 9px

!penting pasti akan menjadi alat yang berkuasa untuk susun atur CSS, sila ingat dan kuasainya:)