a little bit of everything

ปรากฎการณ์ลึกลับที่เกิดขึ้นมากมายใน ie6 ทำให้คนทำเว็บอย่างเราๆต้องเสียเวลาไปมากในการมานั่งตามแก้ไข ซึ่งหนึ่งในปัญหาสำคัญที่เจอใน ie6 คือปัญหาที่เกี่ยวกับการใช้ float

กรณีศึกษา “กล่องหล่น”
ทดลองสร้างกล่อง 2 กล่อง กล่องละ 200px(รวมขอบแล้ว) อยู่ภายใต้กล่องขนาดใหญ่ขนาด 400px โดยให้ทั้งสองกล่อง float ไปทางซ้าย และกล่องแรกอยู่ห่างจากขอบด้านซ้าย 5 pixels

เมื่อดูใน ie8(และบราวเซอร์อื่นๆ) จะได้ผลลัพท์ที่ถูกต้อง ดังนี้

แต่ถ้าดูใน ie6 หล่ะ?

งานเข้าหล่ะสิ มันเกิดอะไรขึ้นเนี่ย กรอบขนาด 400 ใส่กล่องขนาด 200 สองชิ้น ก็รวมเป็น 400 พอดี แล้วทำไมมันตกลงมาได้ ???!

ก่อนที่จะถอนหายใจเฮือกใหญ่แล้วเปลี่ยนใจกลับไปใช้ table ลองมาศึกษาปัญหาอย่างเป็นระบบ แล้วหาทางแก้ไขอย่างถูกต้อง(เท่าที่จะถูกได้ใน ie6) เพื่อชีวิตที่ดีกว่า

มาดูโค้ทกันก่อน อันแรกเป็น css

div#container{
	width: 400px;
	border:1px solid black;
}
div#left{
	background: red;
	width:195px;
	margin-left:5px;
	float:left;
}
div#right{
	background: green;
	width:200px;
	float:left;
}

และ html

This is left content
This is right content

จะเห็นว่ามีกรอบ ขนาด 400 pixels และใส่กล่องเข้าไป 2 กล่อง คือ
- left ขนาด 195px รวมระยะห่างจากขอบ 5px เป็น 200px
- และ right ขนาด 200px

ถึงตอนนี้หลายๆคนอาจจะกลับมานั่งบวกลบคูณหารใหม่(แล้วก็แอบคิดว่าเราตกเลขหรือเปล่า) แต่คำนวนยังไงมันก็ไม่ผิดนี่หว่า แล้วมันเกิดอะไรขึ้น?

สิ่งที่เกิดก็คือ เมื่อมีการใช้คำสั่ง float แล้วให้มีช่องว่าง(margin) ในด้านที่ float ไป เจ้า ie6 จะทำการเบิ้ลช่องว่างนั้นไปอีกเท่าตัวโดยไม่มีสาเหตุ หรือที่รู้จักกันในนามว่า Double Margin Bug

ช่องว่างระหว่างเรา
ทดลองดูปัญหากันแบบชัดๆ ลองเขียน css ดังนี้

div#foo {
   float: left;
   border: 1px solid red;
   width: 50px;
   height: 50px;
   margin: 50px;
}

คือ สร้างกล่อง ขนาด 50×50 กรอบสีแดง และให้มีช่องว่างขนาด 50 pixel รอบๆกล่อง

จากนั้นก็เอาไปใส่ใน html แบบนี้

ดูๆโค้ทแล้วก็ไม่น่าจะมีอะไร แต่ลองเปิดดูใน ie6 เทียบกับ ie8

จะเห็นว่าใน ie6 มีช่องว่างเพิ่มขึ้นมาทางด้านซ้ายอีก 50 pixels หรืออีกเท่าตัวของที่ตั้งไว้

แก้ยังไงหล่ะ?
วิธีแก้ไขนี้ไม่ยาก แต่ขัดใจพอสมควร ก็คือการเพิ่ม display:inline เข้าไปยังกล่องที่มีปัญหา ดังนี้

div#foo {
   width: 50px;
   height: 50px;
   margin: 50px;
   float:left;
   border: 1px solid red;
   display:inline;
}

ผลลัพท์ใน ie6

จะเห็นว่าพื้นที่ว่างที่เพิ่มมาหายไปแล้ว ทีนี้ลองมาทำในกรณีกล่องหล่นของเราบ้าง
เพิ่มโค้ท display:inlie เข้าไป

div#left{
	background: red;
	width:195px;
	margin-left:5px;
	float:left;
	display:inline;
}

ลองดูผลลัพท์

สรุป
จะเห็นว่าปัญหาที่เกิดมันดูไม่มีที่มาที่ไป และวิธีแก้ก็ไม่ค่อยถูกต้องตาม standard เท่าไหร่นัก(ตามหลักแล้ว element ที่ float จะไม่เป็น inline และจะไม่กำหนดความกว้างของ element ที่เป็น inline) แต่การรู้ปัญหาอย่างชัดเจนก็น่าจะช่วยให้แก้ปัญหาที่เจอได้อย่างมีหลักการมากขึ้นและเสียเวลาน้อยลง ซึ่งเจ้ากล่องหล่นนี้ไม่ใช่ปัญหาเดียวที่พบบ่อยใน ie6 ถ้าจะเอาทั้งหมดมาเขียนก็รวมกันได้เป็นมหากาพย์เลยทีเดียว ก็ได้แต่หวังว่าจำนวนผู้ใช้ ie6 ในบ้านเราจะลดลง(อย่างรวดเร็ว) เหมือนบ้างเมืองอื่นเขาซักที