สร้างไฟล์ทดสอบ HTML แบบง่ายใหม่และทดสอบแท็ก ul li ด้านล่าง
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <ul> <li><a href="#">เมนู 1</a></li> <li><a href="#">เมนู 1</a></li> <li><a href="#">เมนู 1</a></li> <li><a href="#">เมนู 1</a></li> <li><a href="#">เมนู 1</a></li> <li><a href="#">เมนู 1</a></li> </ul> <ul> <li><a href="#">เมนู 1</a></li> <li><a href="#">เมนู 1</a></li> <li><a href="#">เมนู 1</a></li> <li><a href="#">เมนู 1</a></li> <li><a href="#">เมนู 1</a></li> <li><a href="#">เมนู 1</a></li> </ul> |
ทดสอบ 1. กำหนด css เป็นโค้ดต่อไปนี้ ซึ่งมีผลดังนี้
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: ดู plaincopy ไปที่ clipboardprint หรือไม่ เนื้อความ{font-size:12px;margin:0} ul {รายการสไตล์: ไม่มี; ระยะขอบ: 0; ช่องว่างภายใน: 0; ความกว้าง: 120px;} อุลลี่ {พื้นหลัง: สีเขียว; ความสูง: 20px;} ul li a {สี: #fff; ช่องว่างภายใน: 0 0 0 10px;} เนื้อความ{font-size:12px;margin:0} ul {รายการสไตล์: ไม่มี; ระยะขอบ: 0; ช่องว่างภายใน: 0; ความกว้าง: 120px;} อุลลี่ {พื้นหลัง: สีเขียว; ความสูง: 20px;} ul li a {สี: #fff; ช่องว่างภายใน: 0 0 0 10px;} |
พบว่ามีช่องว่างทางด้านซ้ายใต้ทั้ง IE5 และ IE5.5 และภายใต้ IE5 ระยะห่างระหว่างบรรทัดระหว่าง LI จะว่างเปล่า ดังที่แสดงด้านล่าง
ทดสอบ 2. กำหนด CSS เป็นรหัสต่อไปนี้
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: ดู plaincopy ไปที่ clipboardprint หรือไม่ เนื้อความ{font-size:12px;margin:0} ul {รายการสไตล์: ไม่มี; ระยะขอบ: 0; ช่องว่างภายใน: 0;} ul li {พื้นหลัง: สีเขียว; ความสูง: 20px; ความกว้าง: 120px;} ul li a {สี: #fff; ช่องว่างภายใน: 0 0 0 10px;} เนื้อความ{font-size:12px;margin:0} ul {รายการสไตล์: ไม่มี; ระยะขอบ: 0; ช่องว่างภายใน: 0;} ul li {พื้นหลัง: สีเขียว; ความสูง: 20px; ความกว้าง: 120px;} ul li a {สี: #fff; ช่องว่างภายใน: 0 0 0 10px;} |
เมื่อเทียบกับการทดสอบ เพียงวาง width:120px; จากคำจำกัดความของ ul ถึงคำจำกัดความของ li จะช่วยแก้ปัญหาพื้นที่ว่างทางด้านซ้ายของ IE5 และ IE5.5 แต่ยังคงมีช่องว่างระหว่าง li ของ IE5 ดังที่แสดงด้านล่าง
ทดสอบ 3. กำหนด CSS เป็นรหัสต่อไปนี้
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: เนื้อความ{font-size:12px;margin:0} ul {รายการสไตล์: ไม่มี; ระยะขอบ: 0; ช่องว่างภายใน: 0;} ul li {พื้นหลัง: สีเขียว; ความสูง: 20px; ความกว้าง: 120px; จัดแนวตั้ง: ด้านล่าง;} ul li a {สี: #fff; ช่องว่างภายใน: 0 0 0 10px;} |
เมื่อเทียบกับการทดสอบครั้งที่สอง ให้เพิ่มแนวตั้ง: ด้านล่างให้กับคำจำกัดความของ li ซึ่งเป็นเรื่องปกติภายใต้ IE5 ระยะห่างบรรทัดว่างระหว่าง li จะหายไป และเอฟเฟกต์จะเหมือนกันในแต่ละเบราว์เซอร์ ดังที่แสดงด้านล่าง
สรุป
1. วิธีแก้ปัญหาที่ li สร้างระยะห่างบรรทัดว่างภายใต้ IE5: หาก li กำหนดความกว้าง คุณจะต้องกำหนดแนวตั้ง: ด้านล่าง;
2. เป็นการดีที่สุดที่จะไม่กำหนดความกว้างใน UL แต่ใน LI หรือ DIV ภายนอก UL
3. วิธีที่ดีที่สุดในการเขียน LI คือการเขียนความสูงและความกว้างภายใน li เช่นเดียวกับการจัดแนวแนวตั้ง: ด้านล่าง (สำหรับ ie5/win bug) หรือเพิ่มเลเยอร์ของ div ด้านนอก ul แล้วกำหนดความกว้าง จากนั้นภายใน li ไม่จำเป็นต้องกำหนดความกว้างและการจัดแนวตั้ง: ด้านล่าง; และการแสดงผลจะเป็นปกติ (จะไม่มีการสร้างระยะห่างบรรทัดว่างภายใต้ IE5) แต่ยังคงจำเป็นต้องกำหนดความสูง