【前端相容性】常見的瀏覽器相容問題及解決方案 - tw511教學網

常見瀏覽器相容. 前言; 一、常見瀏覽器核心. 1.Trident核心; 2.Gecko核心; 3.Blink核心; 4.Webkit核心; 5.Presto核心（已廢棄）. 二、常見相容性問題. 技術文章»【前端相容性】常見的瀏覽器相容問題及解決方案 【前端相容性】常見的瀏覽器相容問題及解決方案 2020-10-3112:00:39 常見瀏覽器相容 前言一、常見瀏覽器核心1.Trident核心2.Gecko核心3.Blink核心4.Webkit核心5.Presto核心（已廢棄） 二、常見相容性問題1.不同瀏覽器的預設margin和padding不一致2.圖片的預設間距不一致3.獲取視口的寬高4.SVG（相容IE8）5.Canvas（相容IE8）6.IE9以下不能用opacity7.文字大小8.繫結事件IE9才支援9.cursor:hand顯示手型10.const問題11.event.srcElement問題12.Firefox不支援innerText13.獲取滑鼠在頁面上的位置14.獲取鍵盤事件的鍵值15.IE6不支援min-height16.IE相容CSS3的background-size屬性 總結 前言   現今市面上的瀏覽器種類繁多，而前端開發過程中所用到的一些功能屬性不可能相容所有瀏覽器，因此就需要解決瀏覽器的相容問題。

（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開始採用的核心，後來的MozillaFireFox（火狐瀏覽器）也採用了該核心，Gecko的特點是程式碼完全公開，因此，其可開發程度很高，全世界的程式設計師都可以為其編寫程式碼，增加功能。

因為這是個開源核心，因此受到許多人的青睞，Gecko核心的瀏覽器也很多，這也是Gecko核心雖然年輕但市場佔有率能夠迅速提高的重要原因。

  此外Gecko也是一個跨平臺核心，可以在Windows、BSD、Linux和MacOSX中使用。

3.Blink核心   Blink是一個由Google和OperaSoftware開發的瀏覽器排版引擎，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中首次被使用，該款引擎的特點就是渲染速度的優化達到了極致，然而代價是犧牲了網頁的相容性。

實際上這是一個動態核心，與前面幾個核心的最大的區別就在指令碼處理上。

瀏覽器核心IE瀏覽器Trident核心，也是俗稱的IE核心Chrome瀏覽器（谷歌）統稱Chromium核心或Chrome核心。

以前是Webkit核心，現在是Blink核心Firefox瀏覽器（火狐）Gecko核心，俗稱Firefox核心Safari瀏覽器Webkit核心Opera瀏覽器（歐朋）最初是自己的Presto核心，後來是Webkit核心，現在是Blink核心360瀏覽器IE+Chrome雙核心獵豹瀏覽器IE+Chrome雙核心UC瀏覽器Trident（相容模式）+Webkit（高速模式）搜狗瀏覽器Trident（相容模式）+Webkit（高速模式）百度瀏覽器IE核心2345瀏覽器IE核心QQ瀏覽器Trident（相容模式）+Webkit（高速模式）遨遊瀏覽器Trident（相容模式）+Webkit（高速模式）世界之窗瀏覽器最初為IE核心，2013年採用IE+Chrome雙核心 二、常見相容性問題 1.不同瀏覽器的預設margin和padding不一致 解決方案在style樣式裡新增如下程式碼： 【PS】：這是最常見也是最容易解決的相容性問題了~ 2.圖片的預設間距不一致 解決方案使用float屬性為img佈局 3.獲取視口的寬高 解決方案①大部分瀏覽器： varw=window.innerWidth; varh=window.innerHeight;   ②IE8、7、6、5： varw=document.documentElement.clientWidth; varh=document.documentElement.clientHeight; //或者 varw=document.body.clientWidth; varh=document.body.clientHeight; 4.SVG（相容IE8） 解決方案☞標籤降級 【PS】：但是呈現的效果沒那麼好（相容你x的IE8(▼皿▼#)~）ahhhh，(ノ￣▽￣)開個玩笑~~ 5.Canvas（相容IE8）   canvas是H5新增的元素，IE從IE9開始支援canvas，那麼如何相容IE8呢？ 解決方案 ①新增對HTML5的支援（去網上下載一個html5.js，很容易搜到的~）   ②新增對canvas的支援（下載excanvas_r3.zip）   ③支援CSS3（http://css3pie.com） 6.IE9以下不能用opacity 解決方案使用filter： 7.文字大小   字型大小在不同瀏覽上不一致。

例如font-size:14px，在IE中的實際行高是16px，下面有3px留白；在Firefox中的實際行高是17px，下面有3px留白，上邊1px留白；在opera中就更不一樣了。

解決方案統一指定行高line-height： 8.繫結事件IE9才支援 解決方案addEventListener屬性&attachEvent屬性： functioneventName(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 functiongetMousePos(event){ vare=event||window.event; varscrollX=document.documentElement.scrollLeft||document.body.scrollLeft; varscrollY=document.documentElement.scrollTop||document.body.scrollTop; varx=e.pageX||e.clientX+scrollX; vary=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能獲取大部分。

解決方案 varkeyCode=e.keyCode||e.which; 15.IE6不支援min-height 解決方案 16.IE相容CSS3的background-size屬性   IE8以下不支援CSS3的background-size屬性。

解決方案①使用濾鏡： ②通過htc檔案（background-sizepolyfill）: 總結   實際生活中的相容性問題還有很多，先記到這裡~  另：部分內容參考——https://www.cnblogs.com/angel648/p/11392262.html