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

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