见得最多的就是检测navigator.userAgent(这个可以面向所有浏览器,略过)。 另外一种就是IE的条件注释,这篇有个比较详细的说明 http://www.jb51.net/article/29336.htm 复制代码 代码如下: <br>alert('非IE') <br></ script> <br><!--<![endif]--> <br> </div> <br>我测试的结果是这种形式是可用的。唯一需要注意的是<!-- [if IE 8]> 中'IE'和'8'中间的这个空白符是必须的,掉了就悲剧了。 <br><br>基于IE的条件注释,变种版本就有几种, <br><strong>第一、类似下面的形式: <br></strong><div class="codetitle"> <span><a style="CURSOR: pointer" data="17154" class="copybut" id="copybut17154" onclick="doCopy('code17154')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code17154"> <br><!--[if IE 6]> <br><input type="hidden" id="ieVersion" value="6" /> <br><![endif]--> <br><!--[if IE 7]> <br><input type="hidden" id="ieVersion" value="7" /> <br><![endif]--> <br> </div> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="95128" class="copybut" id="copybut95128" onclick="doCopy('code95128')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code95128"> <br>var ieVersion = (function(){ return document.getElementById('ieVersion')})(); <br> </div> <br>以此类推,可以获得各个版本的信息,甚至可以添加gt,gte等,从而一次判定一类版本。 <br>关于这种写法,有个例子就是: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="34649" class="copybut" id="copybut34649" onclick="doCopy('code34649')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code34649"> <br><!--[if IE 6]> <br><html class="ie6"> <br><![endif]--> <br><!--[if IE 7]> <br><html class="ie7"> <br><![endif]--> <br><!--[if !IE]><!--> <br><html><!--<![endif]--> <br> </div> <br>于是在CSS里面就可以不用别的hack了,从而避免在IE里面多加载一次CSS, <br>直接 <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="16086" class="copybut" id="copybut16086" onclick="doCopy('code16086')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code16086"> <br>.ie6 xx{} <br>.ie7 xx{} <br>.ie8 xx{} <br>xx{} <br> </div> <br>第二、既然可以写在页面内,当然也可以JS来动态生成。我google了一把,发现还真有人这么做的。 <br>文章地址如下:<a href="http://www.jb51.net/article/29337.htm" target="_blank">http://www.jb51.net/article/29337.htm</a>,写得还比较详细,原理也很简单。 <br>不过这样的缺憾就是把条件注释限定到JS上了,于CSS就是鸡肋了。 <br>继续,既然可以动态生成条件注释来辨明IE版本,基于IE的CSS hack,应该也可以动态生成一段html片段,用样式值来判定版本。 <br>下面是最容易想到的形式,我测试发现这么确实可以,不过也发现了一个问题,看下面的一段代码: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="98332" class="copybut" id="copybut98332" onclick="doCopy('code98332')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code98332"> <br><div id="test_1"><span style="color: red; color: #ff6600 ; color: yellow9 ; *color:green; _color:blue;">测试</span></div> <br><script type="text/javascript"> <br>var test_1 = document.getElementById('test_1'); <br>var test_2 = document.createElement('div'); <br>test_2.innerHTML = '<span style="color: red; color: #ff6600\0; color: yellow\9\0; *color:green; _color:blue;">测试</span>'; <br>console.log('test_1:' test_1.firstChild.style.color '----' 'test_2:' test_2.firstChild.style.color); <br> 在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兼容模式的问题还是别的什么原因,知道的请指教。 确认代码: 复制代码 代码如下: 原始 <br>var test = document.createElement('div'); <br>test.innerHTML = '<span style="*color:red; _color:blue;">动态生成</span>'; <br>document.body.appendChild(test); <br> IE7结果: IE6结果: 基本原理和IE的条件注释差不多,我们一次检测color值就可以了,所以改变一下上面的例子就是: 复制代码 代码如下: