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

【问题标题】：How do you properly detect the browser's support for opacity?您如何正确检测浏览器对不透明度的支持？
【发布时间】：2008-12-23 18:43:54
【问题描述】：

我有一些应用 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 没有过滤器对象？有没有更好的检测方法？

【问题讨论】：

标签： javascript internet-explorer transparency opacity filter

【解决方案1】：

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

下面的代码返回：

'opacity' 如果 style.opacity 受支持
“过滤器”用于 MS 过滤器 (IE
“过滤器”用于 MS 过滤器 (IE7)
'none' 表示其他所有内容

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 用于只有 IE 支持的 conditional comment。

我在 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 开始支持。

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

【讨论】：

这已经晚了好几年了，但是@some，我认为你的意思是把 o.style.filters 和 o.style.filter 放在你的例子中？
@Ryley：正如你所说，那是很久以前的事了，我已经不记得细节了。我确实记得我做了测试，我通常将我的测试代码复制并粘贴到答案中，所以我想我这次也做了。我不再安装 IE6，所以我无法测试它。经过快速研究，我发现对象上至少存在“过滤器”，就像我的代码一样。
@Ryley o.style.filter(s) 不存在，但 o.filter(s) 存在，因此发布的代码是正确的。
@some Microsoft 发布了带有 XP 和 IE6 的限时免费 VM，用于测试目的。您通常必须每三个月下载一次。
@CJDennis 非常感谢。大约一年前听说过，但没用过。我很久以前就放弃了对 MSIE6 的支持。

【解决方案2】：

您所理解的过滤器称为不透明度。真正的过滤器是一个专有的 IE 扩展，它可以在该浏览器的许多其他方面启用不透明度。

尝试this article 了解跨浏览器透明技术。

JS 等效项与描述的完全相同：style.opacity 或 style.filter。更可能的问题是您的 doctype 是过渡性的和/或您试图使其透明的项目没有神奇的 hasLayout

【讨论】：

谢谢 - 我了解过滤器是什么。我想弄清楚的是如何检测浏览器支持哪种不透明度，以便我可以在 javascript 中做正确的事情。