ปวดหัวเหลือเกินกับคุณอี(ไออี)หก ที่ไม่ยอมสูญพันธ์เสียที บางทีเสียเวลาเกือบทั้งวันเพื่อแก้ปัญหาใน CSS ที่แสดงผลผิดเพี้ยนในไออี6 ทั้งๆที่ชาวบ้าน (ชาวบ้าน ได้แก่ ไออี 7 ขึ้นไป , firefox และ safari) เขาแสดงผลได้ปกติ จะนิ่งนอนใจก็ไม่ได้ ในเมื่อสถิติการใช้งาน ie 6 ยังครองแชมป์เป็นที่หนึ่งอยู่

ปัญหานี้ไม่ใช่เป็นปัญหาระดับรากหญ้าเฉพาะในประเทศไทยเท่านั้นนะครับ ทั่วโลกก็เป็นปัญหานี้อยู่ (ฟังดูยิ่งใหญ่มาก) ดูได้จากบทความของฝรั่งเรื่องนี้ (คลิกดูบทความดังกล่าว)

เมื่อปัญหายังไม่หมดไป และเราก็ยังต้องเจอกับมันอยู่ ก็จำเป็นอย่างยิ่งที่จะต้องนำวิธีแก้ัปัญหาคุณอีมาเผยแพร่ เพื่อเป็นแนวทาง เป็นคู่มือ เป็นที่้อ้างอิงสำหรับนักพัฒนาเว็บไซต์ ที่หันมาใช้ css ในการออกแบบกันเป็นส่วนใหญ่ (ที่ใช้ตารางวางเลย์เอาต์ คิดว่าน่าจะยังมี แต่คงน้อยเต็มที)

จากบทความของฝรั่งต่างชาติดังกล่าว ผมได้เอามาขัดเกลาเข้าสู่ภาษาแห่งสยามชาติ ดังนี้ :

Internet Explorer จัดได้ว่าเป็นหายนะ(bane) สำหรับนักพัฒนาเว็บไซต์ในยุคปัจจุบัน มากกว่า 60 เปอร์เซ็นต์ของเวลาพัฒนาเว็บไซต์ต้องหมดไปกับการมัวแก้ปัญหาคุณไอ้อี(ie)  ดังนั้น วันนี้จึงอยากจะแนะนำ 9 วิธีสำหรับการแก้ปัญหา(โลกแตก) นั่น

1. Centering a Layout

การจัดวางเลย์เอาต์ให้อยู่ตรงกลาง ปกติคำสั่ง margin: auto;  เลย์เอาต์ก็จะอยู่ตรงกลางอย่างว่าง่ายแล้วละ แต่จะไม่ง่ายอย่างนั้นในไอ้อี6

เรามาพิจารณาถึงคำสั่งนี้กัน :

#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;

}

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px auto;

}

ผลที่เราอยากได้คือแบบนี้

แต่ไออี 6 จะให้คุณแบบนี้

วิธีแก้ปัญหา
เรา ต้องอาศัยคำสั่ง text-align เข้าช่วย โดยใส่คำสั่ง text-align; center สำหรับตัวหลัก และใส่คำสั่ง text-align: left สำหรับตัวใน ก็จะได้คำสั่งแบบนี้

#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
text-align: center;

}

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px 0;
text-align: left;

}

2. Staircase Effect

เรียก หัวข้อนี้ว่า ‘ผลกระทบขั้นบันได’ (เสี่ยวดีมั้ย)
หลายๆเว็บต้องมีเมนู ไม่ว่าจะเมนูซ้าย เมนูขวา หรือเมนูบน ในทีนี้เราหมายถึงเมนูบน (ภาษา css เรียกว่า navigation ซึ่งแปลว่า การเดินเรือ(หมายถึงเรือที่นำทาง เมนูก็เปรียบเป็นตัวนำทางตัวหนึ่งเช่นกัน)) โดยปกติเราจะใช้คำสั่ง ul li ในการสร้าง

<ul>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
</ul>

ul {
list-style: none;
}

ul li a {
display: block;
width: 130px;
height: 30px;
text-align: center;
color: #fff;
float: left;
background: #95CFEF;
border: solid 1px #36F;
margin: 30px 5px;

}

บราวเซอร์มาตรฐานทั่วไป ก็เป็นอย่างนี้

แต่ไอ้อีหก จะเป็นอย่างงี้

วิธีแก้ปัญหา มี 2 วิธีครับ
1.  สั่ง li ให้ชิดซ้ายซะ

ul li {
float: left;
}

2. เพิ่มคำสั่ง display: inline

ul li {
display:inline;
}

3. Double Margin on Floated Elements

ปัญหาของก็ตามหัวข้อนั่นเลย double margin ใส่ไป 2 แต่มันให้มา 4   (มันในทีนี้หมายถึง ไอ้อีหก)  พูดแล้วไม่เห็นภาพ มาดูตย.กันเลยดีกว่า

#element{
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px 0 0 30px;
border: solid 1px #36F;
}

ชาวบ้านเขาเป็นแบบนี้

แต่ไอ้อีกหก..!!

ปัญหานี้แก้ได้ง่ายๆด้วยคาถามสั้นๆว่า display: inline

#element{
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px 0 0 30px;
border: solid 1px #36F;
display: inline;
}

4. Inability to Have Elements with Small Heights

ability แปลว่า สามารถ แต่หากมี in นำหน้า ก็จะไร้ความสามารถทันที ในข้อนี้ ความหมายคือ “ความไร้ความสามารถในการจัดการความสูงในระดับเล็ก” โดยปกติถ้าเราต้องการความสูงของบ็อก เราก็แค่ใส่คำสั่ง height:xx px; อยากสูงแค่ไหนก็ใส่ค่าเข้าไป แต่ในไอ้อีหกนั้น ถ้าใส่ค่าความสูงต่ำมาก มันจะไม่ต่ำให้

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
}

ควรจะเป็นแบบนี้

แต่ไอ้อีหก..

วิธีแก้ปัญหาสามารถทำได้ 2 วิธี แล้วแต่ถนัดนะครับ
วิธีแรกคือ เพิ่มขนาดฟ้อนท์เข้าไป แล้วใส่ค่า 0

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
font-size: 0;
}

วิธีที่สอง เพิ่มคำสั่ง overflow: hidden

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
overflow: hidden;
}

5. Auto Overflow and Relatively Positioned Items

ปัญหานี้เกิดขึ้น เมื่อเราใช้คำสั่ง Overflow: auto และคำสั่ง Position:relative;
คงเคยเขียน css ให้ box ซ้อน box คือมี box ใน และ box นอก ปัญหาจะเกิดขึ้น เมื่อ boxในมีความสูงกว่า boxนอก แทนที่boxนอกจะเกิด scroll มันกลับแทงทะลุ box นอกออกมาซะงั้น ถ้ายังงง ดูภาพโค๊ดกันเลยดีฟ่า เอ้ย กว่า

<div id=”element“><div id=”anotherelement“></div></div>

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
}

#anotherelement{
background: #555;
width: 150px;
height: 175px;
position: relative;
margin: 30px;
}

ผลลัทธ์ที่ควรจะเป็น

แต่ไอ้อีหกกลับเป็นแบบนี้?

วิธีแก้ปัญหา ง่ายมากครับ(ฝรั่งเขาว่าอย่างนั้น) เพิ่ม relative position ให้กับ parent หรือ boxแม่ หรือที่ผมเรียกว่า box นอกนั่นแหละครับ

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
position: relative;
}

6. Floated Layout Misbehaving

ปัญหานี้เกิดขึ้นเมื่อเราต้องการวาง box เรียงกันมากกว่า 1 คือตั้งแต่ 2 ขึ้นไป ความต้องการคือ ให้มันวางเรียงกันในแนวขวางจากซ้ายไปขวา box แต่ละตัวก็จะถูก fix ความกว้างไว้ เมื่อมีข้อความใน box ยาวเกิดกว่า box box ก็จะไม่ขยายตาม คงสภาพความกว้างไว้ตามค่าที่ fixไว้  แต่ในไออีหก เหมือนว่าจะไม่ยอมรับกติกาข้อนี้ ดูโค๊ดกันดีกว่า คิดว่าคงเคยเจอปัญหานี้

<div id=”container“>

<div id=”element“>http://net.tutsplus.com/</div>

<div id=”anotherelement“></div>

</div>

#element, #anotherelement{
background: #95CFEF;
border: solid 1px #36F;
width: 100px;
height: 150px;
margin: 30px;
padding: 10px;
float: left;  /*ส่งให้ box ทั้งสองลอยอยู่ในฝั่งซ้ายเรียงกันไป*/
}

#container{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: auto;
}

ควรจะเป็นอย่างนี้

แต่ไอ้อีหกกลับเป็นหยั่งงี้..

วิธีแก้ก็แค่เพิ่มคำสั่ง overflow : hidden ไปใน boxใน

#element{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: hidden;
}

7. Space Between List Items

ปัญหานี้ไม่ใช่ ปัญหาช่องว่างระหว่างวัย แต่เป็นปัญหาช่อง ว่างระหว่างลิสต์

<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>

ul {
margin:0;
padding:0;
list-style:none;
}

li a {
background: #95CFEF;
display: block;
}

จากโค๊ดด้านบนผลลัพธ์ควรเป็นแบบนี้

แต่ไอ้อี..6

มีแนวทางแก้ไขอยู่ 3 ทางครับ

1. แก้ปัญหาโดย fix ความกว้าง วิธีนี้อาจไม่ค่อยดีนัก เพราะถึงแก้ปัญหาข้างต้นได้ แต่อาจเจอปัญหาใหม่ คือ บางครั้งลิสต์เมนู อาจมีความกว้างกว่าค่าที่fix ไว้

li a {
background: #95CFEF;
display: block;
width: 200px;
}

หรืออีกวิธีคือไม่ fix ความกว้าง  ใช้วิธี float ไว้

li a {
background: #95CFEF;
float: left;
clear: left;
}

วิธีสุดท้าย เพิ่มคำสั่งไปอีก 1 ชุดสั้นๆ

li {
display: inline;
}

บทความทั่ว่ามาทั้งหมด พร้อมภาพและโค๊ดประกอบนี้ ผมไม่ได้เขียนเอง เพียงแต่แปลจากภาษาฝรั่งเขา หากอ่านผมแปลแล้วไม่เข้าใจก็ไปอ่านต้นฉบับได้ที่  http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/#more-7764

ป.ล. ของฝรั่งเขามี 9 วิธีนะครับ แต่ลดทอนเหลือแค่ 7

บทความน่าสนใจ

1. สร้าง mouse over image caption ด้วย CSS ล้วนๆ
2. CSS Form
3. สร้าง listbox มีปุ่ม radio อยู่ข้างในด้วยมือคุณเอง
4. .note .success .warning css class
5. สำหรับท่านที่ต้องการเปลี่ยนจาก hotmail มาใช้ gmail