เมื่อไอ้อีหก..เราต้องเก็บ

วันนี้มาว่าด้วยภาษาอังกฤษในด้านของนักพัฒนาเว็บไซต์ (Web Developer) ซะหน่อย พอดีไปเจอบทความดีๆเกี่ยวกับการจัดการ css  ในไออี 6 ซึ่งแฝงตัวอยู่ในรูปของภาษาอังกฤษ วันนี้เลยอาจหาญแปลแบบงูๆปลาๆ มาประจานตัวเองดู ~

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