判断浏览器及其版本

[deepthan]

1. 可耐的IE，利用其特性进行区别

• IE9及以下可以用条件注释法

关键词	释义	例子	实际用法
！	非	[if !IE]	<!--[if !IE]>不是IE浏览器则执行这里的代码<![endif]-->
lt	小于	[if lt IE 9]	<!--[if lt IE9] >小于IE9则执行这里的代码 <![endif]-->
lte	小于或等于	[if lte IE 9]	<!--[if lte IE9] >小于或等于IE9则执行这里的代码 <![endif]-->
gt	大于	[if gt IE 9]	<!--[if gt IE9] >大于IE9则执行这里的代码 <![endif]-->
gte	大于或等于	[if gte IE 9]	<!--[if gte IE9] >大于或等于IE9则执行这里的代码 <![endif]-->

• IE10/11不支持条件性注释后的替代方法

当IE的版本到到达10/11后，开始不支持上述条件性注释。可采用如下办法：

1. 使用 IE=EmulateIE9 属性让浏览器采用IE9渲染技术

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

让浏览器采用IE9渲染技术，IE10/11就能识别条件性注释了吗，但是采用IE9渲染技术，你真的不怕吗？

2. 使用媒体查询语句+-ms-high-contrast属性，解析css

CSS的媒体查询语句(media query)是一种高级的CSS条件语句，它能根据一些属性和属性值计算判断CSS是否可以生效。在这里，我们要使用一个IE10/11独有的属性，它就是-ms-high-contrast，只有IE10/11实现了这个属性，它可以有两个值active或none，使用下面的媒体查询语句：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

火狐浏览器、谷歌浏览器不能识别这个属性，所以不会执行这个查询语句里的CSS，从而实现了条件性执行的效果。

3. 使用Javascript判断浏览器的类型，针对IE10/11写css

先用JavaSCript判断是否是IE浏览器，如果是，就在页面的标记上添加一个“ie”的类名：

var ms_ie = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');
    
if ((old_ie > -1) || (new_ie > -1)) {
    ms_ie = true;
}
    
if ( ms_ie ) {
   document.documentElement.className += " ie";
}

有了这个标志性css class后，我们就可以在CSS里区别性的编写css代码了。

.testClass{
    /*这里写通用的css*/ 
}

.ie .testClass{
    /*这里写专门针对IE的css*/
}

2. 判断浏览器和版本信息

判断当前浏览类型及IE浏览器版本

function BrowserType() 
 { 
   var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 
   var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 
   // var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器 
   var isIE=window.ActiveXObject || "ActiveXObject" in window
   // var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器 
   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 (isOpera) { return "Opera";} 
    if (isSafari) { return "Safari";} 
    if (isChrome) { return "Chrome";} 
    if (isEdge) { return "Edge";} 
  }//myBrowser() end 

  alert(BrowserType());

关于IE各版本浏览器判别的方法整理

// 下面是支持ie11的版本的，当然ie6-10也是支持的
    function isIE() { //ie?
        if (window.ActiveXObject || "ActiveXObject" in window){
            return true;
         }else{
            return false;
         }
    }
    
    alert(isIE())   
    IE11的userAgent里是没有MSIE标志的，，所以只可以判断IE10及10以下浏览器
    function isIE(){
        if (window.navigator.userAgent.indexOf("MSIE")>=1) 
        return true; 
        else
        return false; 
    }

    
    

    // //可以判断IE10及10以下浏览器，因为IE11不支持document.all了
     if(document.all){  
        alert("is   IE!");  
      }
      
    
    //判断是否是IE8及以下版本的浏览器
    //原理是利用了IE8及以下版本的浏览器与标准浏览器在处理数组的toString方法的差异做成的。
    //-[1,]是为了实现该方法
    //对于标准游览器，如果数组里面最后一个字符为逗号，JS引擎会自动剔除它
    var ie = !-[1,]; 
    if(ie){
        alert('IE8及以下版本的浏览器');
    }else{
        alert('不是IE8及以下版本的浏览器');
    }


    //判断IE11
    if(navigator.userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)){
        alert('IE11')
    }else{
        alert('不是IE11')
    }


    //支持Edge
    var isEdge = navigator.userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
    if(isEdge){
        alert('Edge');
    }else{
        alert('不是Edge');
    }

参考：

1. 条件注释判断浏览器
2. IE10/11不支持条件性注释后的替代方法
3. Conditional comments are no longer supported
4. 用js判断浏览器类型及IE具体各版本，支持IE11及Edge浏览器