Buat file pengujian HTML sederhana baru dan uji tag ul li di bawah.
| Berikut isi kutipannya: <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> </ul> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> </ul> |
Tes 1. Definisikan css sebagai kode berikut, efeknya sebagai berikut
| Berikut isi kutipannya: lihat salinan biasa ke cetak papan klip? isi{ukuran font:12px;margin:0} ul{gaya-daftar:tidak ada;margin:0;padding:0;lebar:120px;} ul li{latar belakang:hijau;tinggi:20px;} ul li a{warna:#fff;padding:0 0 0 10px;} isi{ukuran font:12px;margin:0} ul{gaya-daftar:tidak ada;margin:0;padding:0;lebar:120px;} ul li{latar belakang:hijau;tinggi:20px;} ul li a{warna:#fff;padding:0 0 0 10px;} |
Ditemukan bahwa ada ruang kosong di sisi kiri di bawah IE5 dan IE5.5, dan di bawah IE5, spasi baris antara LI kosong, seperti yang ditunjukkan di bawah ini
Tes 2. Definisikan css sebagai kode berikut
| Berikut isi kutipannya: lihat salinan biasa ke cetak papan klip? isi{ukuran font:12px;margin:0} ul{gaya-daftar:tidak ada;margin:0;padding:0;} ul li{latar belakang:hijau;tinggi:20px;lebar:120px;} ul li a{warna:#fff;padding:0 0 0 10px;} isi{ukuran font:12px;margin:0} ul{gaya-daftar:tidak ada;margin:0;padding:0;} ul li{latar belakang:hijau;tinggi:20px;lebar:120px;} ul li a{warna:#fff;padding:0 0 0 10px;} |
Dibandingkan dengan pengujian pertama, hanya menempatkan width:120px; dari definisi ul ke definisi li menyelesaikan masalah ruang kosong di sisi kiri IE5 dan IE5.5, namun masih ada celah antara li IE5. Seperti yang ditunjukkan di bawah ini
Tes 3. Definisikan css sebagai kode berikut
| Berikut isi kutipannya: isi{ukuran font:12px;margin:0} ul{gaya-daftar:tidak ada;margin:0;padding:0;} ul li{latar belakang:hijau;tinggi:20px;lebar:120px;perataan vertikal: bawah;} ul li a{warna:#fff;padding:0 0 0 10px;} |
Dibandingkan dengan pengujian kedua, tambahkan vertical-align: bottom ke definisi li, ini normal di IE5, spasi baris kosong di antara li menghilang, dan efeknya sama di setiap browser, seperti yang ditunjukkan di bawah ini.
Meringkaskan
1. Bagaimana mengatasi masalah li menghasilkan spasi baris kosong di IE5: Jika li mendefinisikan lebar, maka Anda perlu mendefinisikan vertical-align: bottom di li;
2. Yang terbaik adalah menentukan lebar bukan di UL, tetapi di LI atau DIV di luar UL.
3. Cara terbaik untuk menulis LI adalah dengan menulis tinggi dan lebar di dalam li, serta perataan vertikal: bawah; (untuk bug ie5/win), atau menambahkan lapisan div di luar ul dan menentukan lebarnya, lalu di dalam li Tidak perlu menentukan lebar dan perataan vertikal: bawah;, dan tampilan akan normal (tidak ada spasi baris kosong yang akan dihasilkan di IE5), namun tingginya masih perlu ditentukan.