Internet Explorer 9 (IE9) CSS3 Opacity and Alpha filter

IE9 introduces support for CSS3 Color Module, including opacity property. IE8 and earlier versions implemented an alternative mechanism to apply opacity using alpha filter of IE-specific filter property. This creates a compatibility challenge because IE9's standard mode supports only opacity and not alpha filter. IE9's compatibility modes Quirks, 7, and 8 still support alpha filter […]

IE9 introduces support for CSS3 Color Module, including opacity property. IE8 and earlier versions implemented an alternative mechanism to apply opacity using alpha filter of IE-specific filter property. This creates a compatibility challenge because IE9's standard mode supports only opacity and not alpha filter. IE9's compatibility modes Quirks, 7, and 8 still support alpha filter but don't implement opacity.

"For sites that use best practice feature detection, this's not a problem. They'll detect that opacity is supported in IE9 and use it instead of filter. The problem is with sites that use browser detection and mistakenly assume that IE always uses filter alpha instead of opacity and then change only filter property in script. The opacity effect will appear broken in those Web pages when run in IE9's default 9 document mode. The fix is to detect the standards-based opacity feature first and browser-specific filter feature second," explains Microsoft.

W3Schools offers a clear explanation of CSS opacity and IE's legacy alpha filter.