【前端兼容性】常見的瀏覽器兼容問題及解決方案

前言

??現今市面上的瀏覽器種類繁多，而前端開發程序中所用到的一些功能屬性不可能兼容所有瀏覽器，因此就需要解決瀏覽器的兼容問題，（PS：死亡要求——兼容IE瀏覽器(ﾉ=▼ω▼=)ﾉ┴─┴），

一、常見瀏覽器內核

1.Trident內核

??說起Trident，大部分人都會覺得比較陌生，但提起IE瀏覽器基本上是家喻戶曉，由于該內核被包含在全世界最高的使用率的作業系統中，即為Windows作業系統，所以我們又經常把它稱之為IE內核，
??由于IE本身的“壟斷性”（雖然名義上IE并非壟斷）而使得Trident內核的長期一家獨大，微軟很長時間都并沒有更新Trident內核，這導致了兩個后果——①Trident內核曾經幾乎與W3C標準脫節（2005年）；②是Trident內核的大量Bug等安全性問題沒有得到及時解決，然后加上一些致力于開源的開發者和一些學者們公開自己認為IE瀏覽器不安全的觀點，也有很多用戶轉向了其他瀏覽器，Firefox和Opera就是這個時候興起的，

• 補充：IE從版本11開始，初步支持WebGL技術，IE8的JavaScript引擎是Jscript，IE9開始用Chakra，這兩個版本區別很大，Chakra無論是速度和標準化方面都很出色，

2.Gecko內核

??Gecko（Firefox內核）：Netscape6開始采用的內核，后來的Mozilla FireFox（火狐瀏覽器） 也采用了該內核，Gecko的特點是代碼完全公開，因此，其可開發程度很高，全世界的程式員都可以為其撰寫代碼，增加功能，因為這是個開源內核，因此受到許多人的青睞，Gecko內核的瀏覽器也很多，這也是Gecko內核雖然年輕但市場占有率能夠迅速提高的重要原因，
??此外Gecko也是一個跨平臺內核，可以在Windows、 BSD、Linux和Mac OS X中使用，

3.Blink內核

??Blink是一個由Google和Opera Software開發的瀏覽器排版引擎，Google計劃將這個渲染引擎作為Chromium計劃的一部分，并且在2013年4月的時候公布了這一訊息，這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用，

4.Webkit內核

??Webkit（Safari內核，Chrome內核原型，開源）:它是蘋果公司自己的內核，也是蘋果的Safari瀏覽器使用的內核， Webkit引擎包含WebCore排版引擎及JavaScriptCore決議引擎，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟體，在GPL條約下授權，同時支持BSD系統的開發，所以Webkit也是自由軟體，同時開放源代碼，在安全方面不受IE、Firefox的制約，所以Safari瀏覽器在國內還是很安全的，

5.Presto內核（已廢棄）

??Presto（Opera前內核） ： Opera12.17及更早版本曾經采用的內核，現已停止開發并廢棄，該內核在2003年的Opera7中首次被使用，該款引擎的特點就是渲染速度的優化達到了極致，然而代價是犧牲了網頁的兼容性，實際上這是一個動態內核，與前面幾個內核的最大的區別就在腳本處理上，

二、常見兼容性問題

1.不同瀏覽器的默認margin和padding不一致

• 解決方案
  在style樣式里添加如下代碼：

<style>
*{
   //在VSCode編輯器中，輸入：m0+p0，按enter鍵就能快速補全
   margin:0;
   padding:0;
 }
 </style>

【PS】：這是最常見也是最容易解決的兼容性問題了~

2.圖片的默認間距不一致

• 解決方案
  使用float屬性為img布局

3.獲取視口的寬高

• 解決方案
  ①大部分瀏覽器：

var w = window.innerWidth;
var h = window.innerHeight;

??②IE8、7、6、5：

var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
//或者
var w = document.body.clientWidth;
var h = document.body.clientHeight;

4.SVG（兼容IE8）

• 解決方案
  ?標簽降級

<svg width="96" height="96">
   <image xlink:herf="svg.svg" src="svg.png" width="96" height="96" />
</svg>

【PS】：但是呈現的效果沒那么好（兼容你x的IE8(▼皿▼#) ~）

ahhhh，(ノ￣▽￣)開個玩笑~~

5.Canvas（兼容IE8）

??canvas是H5新增的元素，IE 從 IE9 開始支持canvas，那么如何兼容 IE8 呢？

• 解決方案
  ①添加對HTML5的支持（去網上下載一個html5.js，很容易搜到的~）

<script src="../html5.js" type="text/javascript"></script>

??②添加對canvas的支持（下載excanvas_r3.zip）

<script src="../excanvas.compiled.js" type="text/javascript"></script>

??③支持CSS3（http://css3pie.com）

<style>
     #nav{
         //一些樣式...
         -webkit-border-radius: 10px; //兼容Safari和Chrome瀏覽器
         -moz-border-radius: 10px; //兼容Firefox瀏覽器
         behavior: url(PIE.htc);
     }
</style>

6.IE9以下不能用opacity

• 解決方案
  使用filter：

<style>
    .box{
        // 一點其他的樣式...
        background-color:#000;  
        opacity:0.5; 
        -moz-opacity:0.5; //兼容Firefox瀏覽器 
        filter:alpha(opacity = 50);
        filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE6
    }   
</style>

7.文字大小

??字體大小在不同瀏覽上不一致，例如font-size:14px，在 IE 中的實際行高是16px，下面有3px留白；在 Firefox 中的實際行高是17px，下面有3px留白，上邊1px留白；在 opera 中就更不一樣了，

• 解決方案
  統一指定行高 line-height：

<style>
    html{
       font-size: 14px;
       line-height: 14px;
    }
</style>

8.系結事件IE9才支持

• 解決方案
  addEventListener屬性 & attachEvent屬性：

function eventName(obj,eventStr,callback){
     if(obj.addEventListener){  //大部分瀏覽器有這個屬性
          //大部分瀏覽器兼容方式
          obj.addEventListener(eventStr,callback,false);
     }else{
          //IE8 及以下
          obj.attachEvent("on"+eventStr,function(){  //第一個引數事件型別要加“on”前綴
                 callback.call(obj);  //統一this的值
          });
     }
}

【PS】
??①addEventListener事件回呼函式中的 this 指向系結事件的物件；attachEvent事件回呼函式中的 this 指向的是window，需要統一兩個方法的this，
??②addEventListener有第三個引數，true表示事件作業在捕獲階段，false為冒泡階段（默認）；而attachEvent只能作業在冒泡階段，
??③解除事件方法標準方法removeListen()；在IE8中，對應使用detachEvent()；注意，和上面的注冊方法要一一對應，
??④阻止默認事件標準方法event.preventDefault()；在IE8中，使用 event.returnValue = false;
??⑤阻止冒泡的方法event.stopPropagation()；在IE8中，使用 event.cancelBubble = true;
??⑥老版本 IE 中，事件函式內部的 this 不是被監聽元素本身，而是 window，故應該使用 call 改變 this 指向，
??⑦addEventLister的第一個引數事件型別是不加“on”前綴的；而attachEvent中需要加“on”前綴;

9.cursor:hand 顯示手型

??Firefox、Safari不支持hand，但IE支持pointer，

• 解決方案
  統一使用 cursor:pointer;

10.const問題

??Firefox下，可以使用const關鍵字來定義常量；IE下，只能使用var關鍵字來定義常量，

• 解決方案
  統一使用var關鍵字來定義常量，

11.event.srcElement問題

??IE下，event物件有srcElement屬性，但是沒有target屬性；Firefox下，event物件有target屬性，但是沒有srcElement屬性，

• 解決方案
  使用srcObj = event.srcElement ? event.srcElement : event.target;

12.Firefox不支持innerText

• 解決方案
  使用textContent：

if(navigator.appName.indexOf("Explorer") > -1){
     document.getElementById('element').innerText = "text";
}else{
     document.getElementById('element').textContent = "text";
}

13.獲取滑鼠在頁面上的位置

??IE8之前沒有完整的位置屬性，

• 解決方案

//Firefox支持屬性 pageX 與 pageY 屬性，這兩個屬性已經把頁面滾動計算在內了
//在 Chrome 可以通過document.body.scrollLeft，document.body.scrollTop計算出頁面滾動位移
//而在 IE 下可以通過document.documentElement.scrollLeft ，document.documentElement.scrollTop 
function getMousePos(event) { 
      var e = event || window.event; 
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; 
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop; 
      var x = e.pageX || e.clientX + scrollX; 
      var y = e.pageY || e.clientY + scrollY; 
      return { 'x': x, 'y': y }; 
} 

14.獲取鍵盤事件的鍵值

• 谷歌：對event.keyCode、event.charCode和event.which都兼容，
• 火狐：對event.keyCode部分鍵值有效（如上下左右鍵），對數字鍵、字母鍵無效；
  ???event.which部分鍵值有效（如字母、數字鍵），對上下左右鍵、PgUp（33）、PgDn（34）鍵無效；
  ???event.charCode部分鍵值有效（如字母、數字鍵），對enter鍵、上下左右鍵、PgUp（33）、PgDn（34）鍵無效，
• IE：IE8及以下對event.charCode無效，event.keyCode和event.which能獲取大部分，
• 解決方案

var keyCode = e.keyCode || e.which;

15.IE6不支持min-height

• 解決方案

<style>
    .box{
        min-height: 200px;
        _height: 200px;  //在IE6、IE5顯示正常，但不能過W3C驗證
        overflow:visible;  //內容超出時顯示
    }
</style>

16.IE兼容CSS3的background-size屬性

??IE8以下不支持CSS3的background-size屬性，

• 解決方案
  ①使用濾鏡：

<style>
   .box{
    background: url(../images/01.png) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover; //兼容Safari和Chrome
    -moz-background-size: cover; //兼容Firefox
    -o-background-size: cover;  //兼容Opera，但是貌似不支持
    filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='../images/01.png', sizingMethod='scale');
    -ms-filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='../images/01.png', sizingMethod='scale'); 
</style>

②通過htc檔案（background-size polyfill）:

<style>
.box{
    background-size: cover;
    behavior: url(../backgroundsize.min.htc);
    -ms-behavior: url(../backgroundsize.min.htc);
}
</style>

總結

??實際生活中的兼容性問題還有很多，先記到這里~
??另：部分內容參考——https://www.cnblogs.com/angel648/p/11392262.html