ปัญหา select ทับเมนู หรือ calendar บน IE6

ปัญหา

สำหรับหลายๆคนที่ทำเว็บน่าจะเจอปัญหาเกี่ยวกับ tag select ของ html บน IE 6 ชอบทับ เมนู หรือ calendar ที่เป็น div ไม่ว่าจะ set z-index ให้มากๆ ก็ยังโดน select ทับอยู่ดี

ปล. ไม่ได้ลงรูปให้ดูนะครับ น่าจะทราบกันอยู่แล้ว (เมื่อไหร่จะเลิกใช้ IE6 กันสักทีก็ไม่รู้)

วิธีแก้ปัญหา

  • เขียน code ให้ hide และ show select เมื่อใช้งานเมนู หรือ calendar วิธีนี้อาจจะทำให้ user ที่ใช้ งงว่าทำไม dropdown หลายไป แต่เป็นวิธีที่ง่ายสุด
  • อีกวิธีคือสร้าง iframe ให้ขนาดความกว้าง+ความยาวเท่ากับเมนู หรือ calendar สำหรับคนที่ใช้ jquery อยู่แล้ว จะโชคดีมีคนเขียน plugin ที่ชื่อ BGIFRAME มาให้ใช้อยู่แล้ว

สำหรับคนที่ใช้ JSCal2 เป็น javascript calendar http://www.dynarch.com/projects/calendar/ แล้วเกิดปัญหากับ ie6 และใช้ prototype javascript

สามารถ download ตัวอย่างได้ที่นี่ครับ jscal2-fix-ie6

ปล. หวังว่าคงมีประโยชน์ไม่มากก็น้อย ผมกว่าจะแก้ได้ก็ใช้เวลานานเหมือนกัน

This entry was posted in Javascript and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>