Double-Float Margin Bug ใน IE6

เพื่อน ๆ คงเคยกำหนดให้ box หนึ่ง box มีระยะห่างจาก box อีกตัวที่เป็นตัวครอบโดยใช้ float: left กันใช่ไหมครับ ฟังดูแล้วคงเหมือนง่ายใช่ไหมครับก็แค่กำหนด อะไร ๆ ตามปกติและเมื่อลอง preview กับ Modern Browser ทุกตัวก็ได้การแสดงผลออกมาที่เป็นปกติ แต่ลองเอาไปเปิดใน Internet Explorer 6 ดูสิครับ!! ทำไม ระยะห่างของ Margin ที่เรากำหนดนั้นมันเพิ่มขึ้นเป็นสองเท่า

ลองเขียน selector ขึ้นมาสักตัว เช่น:

.floatbox {	
float: left;	
width: 100px; 	
margin: 5px 0 5px 60px; 	
border: 1px solid black;}

จาก selector ข้างบนจะเห็นว่า ผมกำหนดให้ระยะห่างของ Margin ทางด้านซ้ายเป็น 60 pixels เมื่อลอง preview มันก็น่าจะให้ผลตามที่เรากำหนดนั้น

จากรูปเป็นการ preview ใน FireFox ซึ่งแสดงผลออกมาเป็นระยะปกติตามที่เราได้กำหนดให้กับ .floatbox คือ 60 pixels คราวนี้เราจะลองเอาไป preview ใน Internet Explorer 6 ว่ามันจะแสดงผลออกมา อย่างไร

จากรูปคุณจะเห็นว่า ระยะ Margin ที่เรากำหนดนั้นมันเพิ่มขึ้นมาเป็นสองเท่า เหตุการณ์นี้เกิดขึ้นได้อย่างไร อย่าตั้งคำถามแบบนั้นเลยครับก็มันเป็น Internet Explorer 6 นี่นะ Engine ที่มันไม่เคยเปลี่ยนนั่นน่ะ ที่ไม่สนโลกที่พัฒนาไปไหนต่อไหน ไม่เคยสนใจต่อมาตรฐานที่พึงจะปฏิบัติหรือกำหนด เป็นต้นเหตุแห่งความปวดหัว เหตุการณ์นี้ จะเกิดก็ต่อเมื่อ float ตัวนั้นเป็น float ตัวแรกของระนาบนั้น ๆ ไม่ว่าจะเป็นซ้าย หรือ ขวา คุณจะได้รับโชคสองเท่า เท่ากัน ปัญหานี้เป็นปัญหาหนักที่เหล่า Designer ไม่สามารถแก้ไขได้จน มกราคมปี 2004 Steve Clason ก็เป็นคนชี้ทางสว่างคนแรก วิธีแก้ปัญหานี้คือ เราต้องใส่ display: inline กำกับเข้าไปใน float ด้วย แล้วเราจะได้การแสดงผลเป็นไปตามที่เรากำหนดให้ไว้ใน Internet Explorer 6 ครับ

ลองเพิ่ม display: inline เข้าไปใน box ที่เราเขียนไว้ตอนแรกดูอย่างนี้

.floatbox {	float: left;	
width: 100px; 	
display: inline;	
margin: 5px 0 5px 60px; 	
border: 1px solid black;}

Modern Browser จะมองเห็นเป็นปกติเหมือนเดิม แต่เจ้า Internet Explorer 6 นั้นจะแสดงผลถูกต้องตามที่เราต้องการด้วย หวังว่าคงมีประโยชน์ในการนำไปใช้ครับ