ไม่สามารถ กำหนด opacity ได้บน IE

ไม่รู้ว่าเคยเจอปัญหานี้กันหรือเปล่า คือ ไม่สามารถกำหนด opacity ให้กับ Element บางตัวได้บน IE แต่ค่าที่กำหนดสามารถทำงานได้บน Browser อื่นๆ

การกำหนด opacity ให้กับ element โดยทั่วไป สามารถทำได้ดังนี้

li {

   display:inline;

   opacity: 0.1;

   filter :alpha(opacity=10);

}

สำหรับ ฺBrowser ทั่วไป รวมถึง Element ส่วนใหญ่ การกำหนดค่า opacity ด้านบนไม่มีปัญหาแต่อย่างใดครับสามารถทำงานได้สมบูรณ์ดี (Cross Browser) แต่มี Element บางตัวบน IE ที่ไม่ปฏิบัติตามคำสั่งนี้ เช่น span em i b

ปัญหานี้เกิดจาก CSS property display:inline ครับ Element ที่กล่าวถึงข้างต้น (และยังมีอีกหลายตัว) จะมีการกำหนดค่าเริ่มต้นของตัวมัน ที่ property display ไว้เป็น inline (หรือมีการกำหนดค่านี้ให้กับมันในภายหลัง) โดยสามารถสังเกตุได้จากการที่มันไม่ขึ้นบรรทัดใหม่แหละครับ การแก้ไขก็ง่ายๆ ครับ โดยการระบุ display เป็นอย่างอื่น แต่หากเรายังคงต้องการให้มันอยู่ที่ตำแหน่งเดิม ไม่ขึ้นบรรทัดใหม่ เราสามารถแก้ไขได้โดยกำหนด float:left แทนครับ

li {

   float: left;

   opacity: 0.1;

   filter :alpha(opacity=10);

}

แนวคิดก็คือ Element ใดๆที่มีค่าเริ่มต้นของ display เป็น inline เช่น span em หรือ หากต้องการกำหนด display:inline ให้กับ Element ใดๆ เพื่อให้มันไม่ขึ้นบรรทัดใหม่ และยังสามารถกำหนด opacity ให้กับมันได้ ให้ใช้ float:left แทน ครับ

ตัวอย่าง :

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

ลองใช้ IE เปิดดูตัวอย่างนี้นะครับ(บน browser อื่นตัวหนังสือจะเป็นสีจางๆทั้ง 2 แถว) แถวบน สามารถทำงานได้ในทุกบราวเซอร์ ในขณะที่ แถวล่าง opacity จะไม่มีผลบน IE (รายการที่มีปัญหา)

ปล.ตัวอย่างนี้ ใช้ li ซึ่งไม่ได้มีค่าเริ่มต้นของ display เป็น inline นะครับ แต่ใช้วิธีกำหนดค่านี้ด้วย CSS เพื่อให้มองเห็นภาพของ property ที่มีปัญหา ซึ่งปัญหานี้มักเกิดขึ้นกับการออกแบบเมนูด้วย li ที่สามารถ fade ได้(ด้วย Javascript) และมันไม่ทำงานบน IE