IE9，Opacity 和 Alpha
译自同名IEBlog：IE9, Opacity, and Alpha，关于IE9和透明度兼容CSS和JS代码。日期是昨晚(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的伪类。