检测浏览器是否有filter属性

一直以为filter属性是IE独有的，实际上也确实是，设置filter属性也只有在IE中才有效。

由于对于不同的浏览器需要设置不同的css的属性，所以难免会用到条件来检测浏览器是否有filter属性，看到有一段代码是这样检测的

/*!
 * Copyright (c) 2009 Simo Kinnunen.
 * Licensed under the MIT license.
 */

var HAS_FILTER = (function() {
	return document.createElement('span').style.filter !== undefined;
})();

09年的代码了，在浏览器里面试了一下，发现在我的firefox和chrome下，这段代码都返回的是true;

---

 

FF版本：

chrome版本：

---

 

在调试工具了尝试了一下，代码如下：

firefox中，有了filter属性，typeof还是String

---

 

chrome中，仍然是undefined

---

 

IE呢？我在IE9下试了试

也是String属性~~

---

最后的解决方法是：

var HAS_FILTER = (function() {
　　var a = document.createElement('div');
　　a.style.filter = 'filter';//这里的filter可以随便设置
　　return a.style.filter !== "";
})();

在ie中，设置了filter值以后（不管是什么），再调用a.style.filter就不会是空字符串；而因为其他的浏览器都不支持filter属性，所以即使是设置了filter的值，仍然是“”空字符串。测试通过ie6,7,8,9,firefox, chrome