มุมโค้งของพื้นหลังเว็บ กับ IE6

IE6 ที่แสนเจ้าปัญหา

เมื่อวันก่อนนั่งตัด CSS หน้าสมัครสมาชิกของบริษัท อุสาดีใจว่าทำเสร็จเร็วจะได้ไปทำอย่างอื่นต่อ เลยทดสอบกับ Browser ทุกตัวที่คนใช้เยอะ ๆ สรุปว่าทุกอย่างผ่านหมด ยกเว้นเจ้า IE6 ที่มุมโค้งของพื้นหลังดันหล่นลงมาแบบในรูปอะงิ

ให้ตายสิเสียเวลานั่งแก้อีกแล้วเบื่อมาก ๆ กับเจ้า ie6 นั่งเครียดอยู่สักพักเลยทดสอบมั่ว ๆ ไปว่ามันเกิดจากอะไร และก็ฟลุ๊กมาก ๆ เลยหละ ซึ่งเป็นอะไรง่ายมาก ๆ แต่เล่นนั่งคิดอยู่ตั้งนานเหมือนกัน

โดยนี่คือโค้ดก่อนแก้มุมโค้งหล่น

width:10px;
height:11px;
padding:0;
margin:0; /*ยังไม่ได้ไปทำอะไรกับค่า margin*/
background:url(...); /*ละไว้คงรู้ว่าเป็นที่อยู่ของอะไร*/

หลังจากนั้นเรามาแก้ปัญหาด้วยการให้ค่าของ margin-top ติดลบซะ ที่ให้เฉพาะค่า margin-top นั้นเพราะว่าดูแล้วน่าจะมีปัญหาจากมีอะไรมาดันอยู่ข้างบน

width:10px;
height:11px;
paddin:0;
margin:0!important; /*hack ie6 หน่อยเพื่อไม่ให้กระทบกับเพื่อน ๆ browser อื่น*/
margin-top:-4px; /*จะกำหนดให้ติดลบเท่าไหร่นั้นแล้วแต่ขนาดภาพมุมโค้ง*/
background:url(...); /*ละไว้คงรู้ว่าเป็นที่อยู่ของอะไร*/

แค่นี้แหละเล่นซะเหงื่อตกเหมือนกัน ตอนแรกคิดไม่ออกว่ามันเป็นมาจากอะไรลองทำไปทำมา ฟลุ๊กด้วยแหละ ถึงได้ทำได้ ใช้เวลาไปตั้ง 1 ชม. กับการแก้ปัญหา ie6 เลยทำเอาเซงไปทั้งวัน เท่าที่ตัด CSS มา มุมโค้งแบบนี้มักจะมีปัญหากับ ie6 บ่อย (หรือคนตัดไม่เก่งพอก็ไม่รู้เหมือนกัน) และมีปัญหาที่หลากหลายออกไป เคยเจอหลายครั้งแล้ว เด๋วถ้ามีใหม่จะเอามาฝากอีก

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