判斷是否是IE,加載不同css樣式

我最終選擇第一第二種結合的方式判斷全部類型

第一種方法,初始化方法中判斷,然後獲取頭部添加樣式連接。但是經過測試,IE9以上纔好用

function ifIE(){ 
    if (window.ActiveXObject || "ActiveXObject" in window){ 
        var headHTML = document.getElementsByTagName('head')[0].innerHTML;
        headHTML    += ' <link rel="stylesheet" href="/rcgl/zjsh/css/login2_IE.css"/>';
        document.getElementsByTagName('head')[0].innerHTML = headHTML;
      } 
}

或者

判斷IE瀏覽器的具體版本
function IEVersion() {
      var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串  
      var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判斷是否IE<11瀏覽器  
      var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判斷是否IE的Edge瀏覽器  
      var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
      if(isIE) {
          var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
          reIE.test(userAgent);
          var fIEVersion = parseFloat(RegExp["$1"]);
          if(fIEVersion == 7) {
              return 7;
          } else if(fIEVersion == 8) {
              return 8;
          } else if(fIEVersion == 9) {
              return 9;
          } else if(fIEVersion == 10) {
              return 10;
          } else {
              return 6;//IE版本<=7
          }   
      } else if(isEdge) {
          return 'edge';//edge
      } else if(isIE11) {
          return 11; //IE11  
      }else{
          return -1;//不是ie瀏覽器
      }
  }

第二種方式,頭部增加判斷

注意:以下用法不支持IE10和IE11

<!--[if !IE]><!--> 除IE外都可識別(不是IE) <!--<![endif]-->
<!--[if IE]> 所有的IE可識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
<!--[if IE 8]> 僅IE8可識別 <![endif]-->
<!--[if IE 9]> 僅IE9可識別 <![endif]-->

第三種,IE hacks:

"_"  是IE6 專有的hack;
"\9" 對IE6-IE10都有效;
"\0"對IE8-IE10都有效;
"\9\0"對IE9-IE10都有效;

    優點:

           CSS hacks 內嵌在普通的 CSS 裏面,不會產生更多 HTTP 請求。CSS hacks 內嵌在普通的 CSS 裏面,編寫時比較方便。

    缺點:

     它是不標準的產物。內嵌在其他 CSS 中,不便維護。尤其是當 hacks 的數量比較多的時候維護簡直是個惡夢。內嵌在其他 CSS 中,即使在非 IE 瀏覽器中也會被加載,浪費資源。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章