IE9，Opacity 和 Alpha

译自同名IEBlog：IE9, Opacity, and Alpha，关于IE9和透明度兼容CSS和JS代码。日期是昨晚(2010/8/17)6:15。

以下为译文：

IE9引入了 CSS3 Color Module 的支持，包括其中已普遍使用的透明度( opacity )属性。如同我们已经完成的其他基于标准的特性，为了在其他浏览其中的相同的标记能工作在IE9的标准模式下，IE9实现了透明度。

IE8以及其之前的版本实现了另一种替代的机制，使用IE特定的滤镜( filter )属性中的 alpha filter 来应用透明度。这就形成了一个兼容性的挑战，因为IE9标准模式只支持 opacity，而不支持 alpha filter ( IE9的兼容即怪异模式，7和8仍然支持 alpha filter 但不支持实现opacity )。

对于使用最佳实践特性检测法的站点，兼容性不是问题。它们会检测 opacity 在IE9中是否被支持并使用 opacity 替代滤镜。问题在于那些使用了浏览器检测的站点以及那些错误的假设了IE总是使用透明度滤镜而不是opacity并在脚本中只使用滤镜的站点。那些站点里的web页面，在IE9默认的9的文档模式下，透明度效果会失效。解决方法是先检测基于标准的 opacity 特性，然后是浏览器特定滤镜，就如同我们之前文章里描述的那样。

最佳实践CSS为例

.fiftyPercentOpaque
{
    opacity: 0.5;
    filter: alpha(opacity=50);
} 

最佳实践代码为例

// set flags for whether we should use opacity or filter with
// this browser (or browser mode). we prefer opacity.
var useOpacity =
   (typeof document.createElement("div").style.opacity != 'undefined');
var useFilter = !useOpacity
   && (typeof document.createElement("div").style.filter != 'undefined');

function setOpacity(el, value) {
   // let el be either an element object or an id string
   if (typeof el == 'string')
      el = document.getElementById(el);

   // ensure value is in [0-1] range
   value = Math.min(1, Math.max(value, 0));

   // set opacity or filter alpha depending on what's supported
   if (useOpacity)
      el.style.opacity = value;
   else if (useFilter)
      el.style.filter = "alpha(opacity=" + (value * 100) + ")";
}

选择性的浏览器检测代码

function browserDetectSetOpacity(el, value) {
   // let el be either an element object or an id string
   if (typeof el == 'string')
      el = document.getElementById(el);

   // ensure value is in [0-1] range
   value = Math.min(1, Math.max(value, 0));

   if (navigator.userAgent.match(/\bMSIE\b/)
         && (!document.documentMode || document.documentMode < 9))
      el.style.filter = "alpha(opacity=" + (value * 100) + ")";
   else
      el.style.opacity = value;
}

总结

上面描述的问题，只出现在使用脚本改变一个元素的透明度，并且这个脚本里应用滤镜前没有检测浏览器是否支持 opacity 的时候。只使用CSS声明的透明度的网站仍将工作良好，甚至是改变透明度是间接通过改变一个元素的类名或者使用诸如:hover的伪类。

W3Schools对 CSS opacity 以及IE遗留的 alpha filter 提供了一份清楚的解释。

本文链接：http://www.swordair.com/docs/ie9-opacity-and-alpha/，转载请注明出处。