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

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

IE8 Boxes

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

โค้ทเดิม ใน IE6

ก่อนที่จะถอนหายใจเฮือกใหญ่แล้วเปลี่ยนใจกลับไปใช้ 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

IE8

IE6

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

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

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

ผลลัพท์ใน ie6

IE6 after display:inline

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

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

IE6 กล่องไม่หล่นแล้ว!

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

แต่ปัญหามันก็เกิดกับบราวเซอร์ที่รักเจ้าเก่าของเรา ไม่ใช่ใครที่ไหน ie6 นั่นเอง สำหรับคนทำเว็บแล้วก็อยากจะลืมๆเจ้าบราวเซอร์นี้มันไปซะ แต่พอเหลือบมาดูสถิติ browser ที่ใช้กันในบ้านเราแล้วก็ไม่สามารถจริงๆ (Truehits.net::2008-11 IE6 51.1%) ดังนั้นก็ต้องมาตามแก้กันไป

วิธีทำให้ไฟล์ png แสดงผลได้อย่างปกติสุขใน ie6 นั้นมีหลายวิธีแล้วแต่ความถนัด สำหรับวิธีที่จะพูดถึงนี้ส่วนตัวแล้วชอบเพราะว่าไม่ต้องดัดแปลงโค้ทมากนัก ก่อนอื่นก็มาดูการแสดงผลไฟล์ png ของ ie6 เทียบกับ ie7 กันก่อน

Original PNG File

IE7

IE6 !!!

จะเห็นว่าใน ie6 นั้นส่วนพื้นหลังมันไม่ใสจริง แต่มีพื้นที่สีเทาๆมาทับ background(รูปไม้บรรทัด) ด้านข้างหมด คราวนี้มาดูวิธีแก้กัน

IE PNG FIX

โค้ทที่ใช้แก้นี้คือ iepngfix ต้นฉบับคือ Twin Helix: IE PNG Fix

วิธีใช้งานก็ง่ายๆ ไม่ปวดสมอง โดย

1. ดาวน์โหลดไฟล์ iepngfix.zip ได้ที่เว็บต้นฉบับเลย
2. แตกซิปแล้วนำไฟล์ iepngfix.htc กับ blank.gif ไปใว้ในโฟลเดอร์ที่ต้องการ
3. เพิ่ม style เข้าไปในไฟล์ html คือ

   โดยที่ url(“iepngfix.htc”) ใส่เป็น path เรียกไปหาไฟล์นี้ ทั้งหมดใส่ไว้ใน tag lte IE6 เพื่อบราวเซอร์อื่นๆ รวมทั้ง ie7+ จะได้ไม่ต้องสนใจมัน

จากนั้นรีเฟรชดูใหม่ใน ie6

IE6 ใช้ได้แล้ว!

หมายเหตุ: หากไฟล์ iepngfix.htc และ blank.gif ไม่ได้อยู่ที่เดียวกัน ให้เปิดไฟล์ iepngfix.htc ด้วย notepad และแก้ไข path ที่ IEPNGFix.blankImg = thisFolder + ‘blank.gif’; <–อาจแก้เป็น absolute path เช่น IEPNGFix.blankImg =’/images/blank.gif’;