Opacity has been the bug-bear for years of Web development. Is it now resolved? No. In fact, it’s getting worse. Firefox, Safari, Opera and any other browsers based around the WebKit or Gecko-rendering engine have supported the de facto CSS “opacity: ” property, taking a decimal value between 0 and 1 (1 being fully opaque).
However, Internet Explorer has stuck with it’s “filter: ” property, which invokes a DirectX filter that changes the opacity of an element. The “opacity: ” property is now a part of the CSS3 specification, and you would have thought Internet Explorer 8 would support it – it’s hardly difficult. IE8 does not support “opacity: ” and to frustrate you further, it’s new “standards mode” moves the “filter: ” property to “-ms-filter: “. Okay, so it’s best to move all these non-standard CSS declarations out of standards mode, but when you’re not replacing it with anything, you’re just creating further problems.
So in short, to ensure maximum compatibility from IE8 onwards, you should declare opacity three times:
opactity: 0.8; filter: alpha(opacity=80); -ms-filter: alpha(opacity=80);
Joy! What’s more, IE8 does not seem to support alpha values for colours in the form of RGBA or HSLA. Oh well, at least we got PNG transparency in IE7.