menu
Width Mode: Fixed • Font size: Small | Normal | Large

IE9，Opacity 和 Alpha

@ 10:33 August 18th, 2010 by 葵中剑
Comments: 5
Categories: Front-end, Translation

译自同名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为例

1
2
3
4
5

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

最佳实践代码为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 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) + ")";
}

选择性的浏览器检测代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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 提供了一份清楚的解释。

Related Post:

5 Responses to “IE9，Opacity 和 Alpha”

  1. 关于IE9透明度以及测试 | 浏览器排行榜 says:
    2010/08/19 at 10:08

    [...] 中文翻译：iifksp 译自同名IEBlog：IE9, Opacity, and Alpha，关于IE9和透明度兼容CSS和JS代码。日期是昨晚(8/17)6:15。 此条目发表在 IE浏览器 分类目录。将固定链接加入收藏夹。 ← Chrome 6浏览器第一个Beta版体验 [...]

    Reply
  2. mealdy says:
    2010/08/19 at 14:26

    太棒啦，终于支持了，可惜离发行、普及还有一段时日呀，许多优秀的web版面仍要继续遭受IE的蹂躏……

    Reply
  3. 葵中剑's Blog – SwordAir.com » CSS3 Media Queries 详解 says:
    2010/08/23 at 09:02

    [...] Media Queries 的文章。同时位列其中的也有前天我刚刚翻译的 IE9, Opacity 和 Alpha [...]

    Reply
  4. 白詰草 says:
    2010/08/24 at 14:56

    微软长期的不思进取把IE的口碑搞臭了，想当年IE3-5的时候人家还特地给IE写好代码，把Netscape过滤掉呢……而现在“是不是IE”几乎已经和“是不是标准浏览器”划等号了，包括我自己平时和同事说到浏览器兼容问题时都用“标准浏览器”一词来通称GPW三个核心的浏览器了……希望微软在这方面加把劲，也希望这位“有个好名字”的产品经理 Mr. Quirk 能有点特别之处 = =
    另一个话题，个人感觉很多时候rgba这种仅适用于背景色的CSS特性可能更常用一点吧……

    Reply

Leave a Reply