IE浏览器版本检测小结

最近在PC web前端IE兼容性方面，做了很多工作，包括解决IE兼容性的BUG、IE低版本polyfill解决方案和IE浏览器下的提示。IE兼容的问题多而杂，且IE各个版本存在的问题也不一样，总结起来的话比较费劲；但针对IE的解决，都要涉及到IE版本的检测，本文对常用方法做一些总结。

---

何时需要IE版本检测

1. IE兼容性BUG
   在IE低版本浏览器中，会有很多意想不到的BUG，大部分是样式BUG，因为IE低版本对css的一些属性的支持情况不尽相同，倘若页面中和现代浏览器用同一种css样式文件，很大概率会出现样式不一致甚至错乱的情况。而不同的IE版本，又不尽相同，所以最好的解决办法是对不同的IE版本做区分使用不同的样式文件。

2. IE低版本polyfill
   IE不同版本对H5的新特性以及js的一些API支持情况也不尽相同，比如，最近解决的placeholder属性polyfill，IE9及以下版本不支持<input>的 placeholder 属性。
   
   
   polyfill可以通过在input上覆盖浮动元素实现placeholder效果，input输入值时隐藏浮动元素。但IE10以上，可以直接使用原生的placeholder属性，不需要进行处理，这就需要进行版本检测对实现方法进行区分。

3. IE浏览器下的提示
   有些情况下，不需要去解决IE不支持的问题，可能是策略上只需要支持现代浏览器，也可能是一些高级效果没办法通过polyfill实现。这时可以简单在IE低版本浏览器打开页面时，给出提示，例如：
   

IE版本检测方法

html条件注释

对于IE兼容样式问题，常用的解决办法是针对不同的IE版本使用不同的样式文件进行处理。而针对某个IE版本的样式文件，不希望在其他版本下引入，这时使用条件注释可以很方便的进行区分。

<!-- 默认先调用css.css样式表 -->
<link rel="stylesheet" type="text/css" href="css.css" />

<!-- IE下调用1.css样式表 -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="1.css" />
<![endif]-->

<!-- 如果IE浏览器版本小于6,调用2.css样式表 -->
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="2.css" />
<![endif]-->

条件注释语句在其它浏览器里，完全就是一堆注释，但在IE里却不会。IE会分析里面的版本号，并根据版本号确定要不要解析里面内容。
其中有一些语法：

• lte: 就是Less than or equal to的简写，也就是小于或等于的意思。
• lt: 就是Less than的简写，也就是小于的意思。
• gte: 就是Greater than or equal to的简写，也就是大于或等于的意思。
• gt: 就是Greater than的简写，也就是大于的意思。
• !: 就是不等于的意思
  根据这些语法就可以轻松区分不同IE版本了：

<!--[if IE]> / 如果浏览器是IE /
<!--[if IE 5]> / 如果浏览器是IE 5 的版本 /
<!--[if IE 6]> / 如果浏览器是IE 6 的版本 /
<!--[if IE 7]> / 如果浏览器是IE 7 的版本 /
<!--[if lt IE 8]> / 如果浏览器是低于IE 8 的版本 /
<!--[if gte IE 9]> / 如果浏览器是大于等于IE 9 的版本 /

注：条件注释是在 IE5.0 以后才被IE支持的，对于IE5以前的浏览器是无效的；且对高版本IE10以上也无效

条件注释配合脚本控制

有些情况下，需要更灵活的脚本控制，而不仅仅是区分样式文件的引入。这时可以在js脚本中实现检测IE版本的方法，一种实现方法即是根据条件注释的原理进行判断：

var isIE = function(){
    var b = document.createElement('b')
    b.innerHTML = '<!--[if IE]><i></i><![endif]-->'
    return b.getElementsByTagName('i').length === 1
}

首先生成了一个b元素，设置它的innerHTML为IE条件注释，注释里只有一个空的标签，然后读取里面的元素 i , 如果被解析为dom元素，则 length 为1；被当做注释，未被解析，则没法获取这个元素。
进而可以更加灵活地检测不同版本的IE浏览器：

var isIE = function(ver){
    var b = document.createElement('b')
    b.innerHTML = '<!--[if IE ' + ver + ']><i></i><![endif]-->'
    return b.getElementsByTagName('i').length === 1
}
if(isIE(6)){
    // IE 6
}
// ...
if(isIE(9)){
    // IE 9
}

根据浏览器内核信息检测

js的全局对象window子属性 navigator.userAgent （用户代理属性），这个属性是包含了浏览器的相关信息，包括我们需要的浏览器内核信息。navigator.userAgent这个值取出来是个字符串，可以通过string的 indexOf 方法或者正则匹配来验证关键字符，达到检测浏览器版本的目的。
首先看看各个浏览器版本的 navigator.userAgent 值：

// FireFox userAgent
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:60.0) Gecko/20100101 Firefox/60.0"
// Chrome userAgent
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36"
// safari userAgent
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.1 Safari/605.1.15"

// IE Edge userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393"
// IE 11 userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko"
// IE 10 userAgent
"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0)"
// IE 9 userAgent
"Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0)"
// IE 8 userAgent
"Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0)"
// IE 7 userAgent
"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0)"
//IE6 ...
...

根据解析userAgent字符串的信息，就可以区分出不同浏览器的版本：

function BrowserType() 
 { 
   var userAgent = navigator.userAgent; 
   var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE浏览器 
   var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
   var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器 
   var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器 
   var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 && !isEdge; //判断Chrome浏览器 

   if (isIE)  
   { 
      var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); 
      reIE.test(userAgent); 
      var fIEVersion = parseFloat(RegExp["$1"]); 
      if(userAgent.indexOf('MSIE 6.0')!=-1){
        return "IE6";
      }else if(fIEVersion == 7) 
        { return "IE7";} 
      else if(fIEVersion == 8) 
        { return "IE8";} 
      else if(fIEVersion == 9) 
        { return "IE9";} 
      else if(fIEVersion == 10) 
        { return "IE10";} 
      else if(userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)){ 
            return "IE11";
        } 
      else
        { return "0"}//IE版本过低
    }//isIE end 

    if (isFF) { return "FF";} 
    if (isSafari) { return "Safari";} 
    if (isChrome) { return "Chrome";} 
    if (isEdge) { return "Edge";} 
  }//myBrowser() end 

注：MDN网站并不推荐使用这种方法进行浏览器检测，同时也给出了理由

特征检测

如上所述，MDN推荐使用“特征检测”来检测web新特性的支持情况。即某些属性在不同版本浏览器下支持情况是不同的，同时也可以直接用特征检测来判断浏览器版本：

// 低版本IE浏览器才具有window.ActiveXObject属性，支持ie6-11
    function isIE() { //ie?
        if (window.ActiveXObject || "ActiveXObject" in window){
            return true;
         }else{
            return false;
         }
    }

然而，使用特征检测来判断IE浏览器版本，并不通用，且无法精确区分IE版本。MDN推荐使用特征检测，也只是希望使用特征检测新特征的支持情况，从而进行一些polifill的处理。例如，File API在IE低版本是不支持的，所以需要进行判断：

if (window.FileReader) {
  // supported
} else {
  // not-supported
}

进而对浏览器不支持的情况进行处理。

综上，相信看过这些不同的浏览器检测方法后，大家对于何种情况下用何种方法已经有了自己的想法。对于IE的兼容性处理确实比较头疼，但方法总比困难多，掌握更多的方法，才能更快解决问题。