Commentary on web design and other topics by Guy Leech, web fanatic.
IE 8 does not support the CSS opacity property, but it also does not support the proprietary Microsoft filter. This means there is no way to emulate opacity, short of using images.
As I was merrily testing out IE 8’s support for CSS selectors and properties, I noticed it did not support opacity. On further testing, I found that it did not support the standard way of emulating opacity, used in IE 7, the filter: alpha(opacity=50);.
The reason for this is the removal of hasLayout from the IE 8 rendering engine. While a huge step forward for web standards, it has the unfortunate side effect of rendering all filters useless; to use a filter, the element being filtered needs to have layout:
Almost any object can have filters applied to it. However, the object that the filter is applied to must have layout before the filter effect will display. Put simply, having layout means that an object has a defined height and width.
Taken from MSDN.
I also found out that word-wrap doesn’t work either, which is odd, as it’s a Microsoft innovation. But who really cares?
To summarise, there is no way to emulate opacity in IE 8, until someone finds a really devious workaround.
I do believe that this in an unintended side-effect of removing hasLayout, but it’s still a major issue that needs to be addressed.
I’d love to hear people’s opinions on the trade-offs between having opacity or hasLayout. Which do you think would be a better way to go?
It’s been pointed out (and confirmed) that filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50) still works, which can be used to emulate opacity. I overlooked it in my testing, as I’ve never actually used it.
ILMOL
07 / 03 / 2008
I had a exactly the same question yesterday. I guess IE is expectiong us to use version targeting for emulating opacity. It would be really interesting to watch how this opacity topic develops
thanks for sharing
Guy Leech
08 / 03 / 2008
ILMOL, it’s been pointed out that
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50)still works. I had totally forgotten about that longhand version while testing, so there is still a way to emulateopacity.Just a note, it does require that ActiveX can be run on the users computer (i.e., they haven’t disabled it in their settings).