Margin dan padding mungkin sentiasa digunakan, tetapi bagaimana untuk menyelesaikan masalah yang timbul? Kerana penyemak imbas mentafsir lebar bekas dengan cara yang berbeza:
IE 6.0 Firefox Opera, dsb. ialah
lebar sebenar=lebar+padding+margin+sempadan
IE5.X
lebar sebenar=lebar-padding-margin-sempadan
Penyelesaiannya ialah:
div.content {
width:400px; //Ini adalah lebar yang salah, semua pelayar membacanya
voice-family: ""}""; //IE5.X/win mengabaikannya Kandungan selepas ""}""
voice-family:inherit;
width:300px; //Sesetengah pelayar termasuk IE6/win membaca ayat ini dan nilai baharu (300px) menimpanya Lama
}
html> ;body .content { //html>body ditulis dalam CSS2
width:300px; //Pelayar yang menyokong CSS2 (bukan IE5) cukup bertuah untuk membaca ayat ini
}
div.content {
width:300px !important; //Ini ialah lebar yang betul yang menyokong teg !important menggunakan nilai di sini
width (space)/**/:400px ; //IE6/win tidak menghuraikan ayat ini, jadi IE6/win masih berpendapat bahawa nilai lebar ialah 300px manakala IE5.X/win membaca ayat ini, nilai baharu (400px) menimpa yang lama kerana !penting; tag Ia tidak berfungsi untuk mereka
}
html>body .content { //html>body ditulis dalam CSS2
width:300px; //Pelayar yang menyokong CSS2 cukup bertuah untuk membaca ayat ini
}