แก้ปัญหากล่อง <Select> ลอยใน IE6
By nuttarut phugsuwan [ Tuesday, January 10th, 2012 ]
Pin It
ปกติแล้วส่วนต่างๆ ในหน้าเว็บนั้นนอกจากจะถูกจัดตำแหน่งให้เรียงจากซ้ายไปขวาหรือบนลงล่างได้แล้ว ยังสามารถซ้อนทับกันได้อีกด้วย ตัวอย่างเช่น เวลาเรากดดูรูปในเฟสบุ๊คแล้วรูปนั้นก็จะถูกแสดงจนเต็มหน้าจอบดบังส่วนอื่นๆ ไปหมด แต่เมื่อดูเสร็จแล้วรูปนั้นก็จะหายไป และส่วนอื่นของหน้าเว็บก็จะกลับมาถูกแสดงเหมือนเดิม ซึ่งคุณลักษณะนี้จะถูกกำหนดด้วย z-index ใน CSS ที่จะบอกว่าส่วนไหนควรถูกจัดเรียงยังไงจากหลังไปหน้า
ถึงแม้ว่าเราจะสามารถกำหนดคุณลักษณะนี้ได้กับทุกส่วนในหน้าเว็บ แต่ก็ยังมีข้อยกเว้นอยู่บ้างคือแท็ก <select> ใน IE6 (Internet Explorer เวอร์ชั่น 6) ซึ่งมีบั๊กที่ส่งผลให้แท็กนี้ไม่สนใจค่า z-index ที่ถูกกำหนดไว้ ทำให้เมื่อเราสั่งให้ส่วนอื่นมาแสดงผลทับส่วนที่เป็นแท็ก <select> นี้ ก็จะยังโดน <select> แสดงผลทับข้างหน้าอยู่ดี
วิธีแก้ไขคือใช้ library ของ jQuery ที่ชื่อ bgiframe และใช้คำสั่งต่อไปนี้
$('.fix-z-index').bgiframe();โดยแทนที่ fix-z-index ด้วยชื่อส่วนของหน้าเว็บที่มีปัญหา แค่นี้ทุกส่วนก็จะถูกแสดงผลออกมาถูกต้องอย่างที่เรากำหนดเอาไว้