当前位置：首页 > 资讯 > 技术文档

js中有关IE版本检测

时间：2022-02-09 13:01 编辑：来源：阅读：
扫一扫，手机访问

摘要：js中有关IE版本检测

见得最多的就是检测navigator.userAgent(这个可以面向所有浏览器，略过)。另外一种就是IE的条件注释，这篇有个比较详细的说明 [url=http://www.1sucai.cn/article/29336.htm]http://www.1sucai.cn/article/29336.htm [/url]

[url=http://www.1sucai.cn/article/29337.htm]http://www.1sucai.cn/article/29337.htm[/url]，写得还比较详细，原理也很简单。不过这样的缺憾就是把条件注释限定到JS上了，于CSS就是鸡肋了。继续，既然可以动态生成条件注释来辨明IE版本，基于IE的CSS hack，应该也可以动态生成一段html片段，用样式值来判定版本。下面是最容易想到的形式，我测试发现这么确实可以，不过也发现了一个问题，看下面的一段代码：

[u]复制代码[/u] 代码如下:

<div id="test_1"><span style="color: red; color: #ff6600\0; color: yellow\9\0; *color:green; _color:blue;">测试</span></div>
<script type="text/javascript">
var test_1 = document.getElementById('test_1');
var test_2 = document.createElement('div');
test_2.innerHTML = '<span style="color: red; color: #ff6600\\0; color: yellow\\9\\0; *color:green; _color:blue;">测试</span>';
console.log('test_1:' + test_1.firstChild.style.color + '----' + 'test_2:' + test_2.firstChild.style.color);
</script>

在IE9下结果：LOG: test_1:yellow----test_2:yellow 在IE8下结果：LOG: test_1:#ff6600----test_2:#ff6600 在IE7下结果：LOG: test_1:green----test_2:blue 在IE6下结果：test_1:blue ----test_2:blue （IE6没有console.log，所以上面的console.log需要换成alert）上面的问题大家应该看出来了，IE7下两种情况不一致，不知道是我的IE7兼容模式的问题还是别的什么原因，知道的请指教。确认代码：

[u]复制代码[/u] 代码如下:

<div><span style="*color:red; _color:blue;">原始</span></div>
<script>
var test = document.createElement('div');
test.innerHTML = '<span style="*color:red; _color:blue;">动态生成</span>';
document.body.appendChild(test);
</script>

IE7结果： [img]http://files.jb51.net/upload/201201/20120104165349856.jpg[/img] IE6结果： [img]http://files.jb51.net/upload/201201/20120104165349669.jpg[/img] 基本原理和IE的条件注释差不多，我们一次检测color值就可以了，所以改变一下上面的例子就是：

[u]复制代码[/u] 代码如下:

<div id="test_1"><span style="color: red; color: #ff6600\0; color: yellow\9\0; *color:green; _color:blue;">测试</span></div>
<script type="text/javascript">
var test_1 = document.getElementById('test_1');
//var test_2 = document.createElement('div');
//test_2.innerHTML = '<span style="color: red; color: #ff6600\\0; color: yellow\\9\\0; *color:green; _color:blue;">测试</span>';
var c = test_1.firstChild.style.color;
alert(c=='red'?'other':c=='yellow'?'IE9':c=='#ff6600'?'IE8':c=='green'?'IE7':'IE6');
</script>

在IE9下结果：IE9 在IE8下结果：IE8 在IE7下结果：IE7 在IE6下结果：IE6 按理来说，对于FF,Chrome/Safari、opera都可以利用-moz、-webkit、-o等私有前缀来辨别，不过对于属性的选取要斟酌，类似color是不行的。这个检测方法旁门左道而已，未来版本或者其他浏览器是不是有这个bug也不确定，而且IE7的那个bug我还没有弄清楚，所以也就暂时知道可以这么做就可以了。

全部评论(0)

上一篇：使用JavaScript和CSS实现文本隔行换色的方法
下一篇：浅谈JavaScript中promise的使用

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部