javascript - 您如何正确检测浏览器对不透明度的支持？

Question

我有一些应用 alpha 透明度的 javascript 代码。在执行此操作之前，它会尝试检测浏览器支持哪种类型的透明度并将其存储在变量中以备后用。代码如下所示:

// figure out the browser support for opacity
if (typeof br.backImg.style.opacity != 'undefined') 
    opacityType = 'opacity';
else if (typeof br.backImg.filters == 'object') 
    opacityType = 'filter';
else 
    opacityType = 'none';

对于 Firefox 和 Safari，第一个条件为真，对于 IE7 第二个条件为真，但对于 IE6 则落到最后一个条件。为什么 IE6 没有过滤器对象？有没有更好的检测方法？

Answer 1

在 IE7 中是过滤器s，在 IE6 中是过滤器。

下面的代码返回:

• 'opacity' 如果支持 style.opacity
• 用于 MS 过滤器的“过滤器”( IE < 7 )
• 用于 MS 过滤器的“过滤器”(IE7)
• 对于其他所有内容“无”

.

var opacityType=(
  (typeof o.style.opacity !== 'undefined') ? 'opacity' :
  /*@cc_on @if (@_jscript)
    (typeof o.filters === 'object') ? 'filters' :
    (typeof o.filter === 'string') ? 'filter' :
  @end @*/
  'none'
);

@cc_on , @if和 @_jscript用于 conditional comment只有 IE 支持。

我已经在 FF3、IE6、IE7、Opera9 和 Chrome 1 上测试过这个，但没有在 IE4、5 或 8 上测试过。

根据 quirksmode MS 已将 CSS 从 filter 更改为 -ms-filter 所以我不知道您使用 IE8 会得到什么结果。

根据 mozilla opacity 从 FF 0.9、Opera 9 和 Safari 1.2 开始支持， filter 从 IE4 开始。

我不喜欢做浏览器嗅探，但有时这是必要的，条件注释使得处理特定的 IE 事情变得容易得多。