常見瀏覽器兼容

• • 前言
  • 一、常見瀏覽器內核
  • • • 1.Trident內核
      • 2.Gecko內核
      • 3.Blink內核
      • 4.Webkit內核
      • 5.Presto內核（已廢棄）
  • 二、常見兼容性問題
  • • • 1.不同瀏覽器的默認margin和padding不一致
      • 2.圖片的默認間距不一致
      • 3.獲取視口的寬高
      • 4.SVG（兼容IE8）
      • 5.Canvas（兼容IE8）
      • 6.IE9以下不能用opacity
      • 7.文字大小
      • 8.綁定事件IE9才支持
      • 9.cursor:hand 顯示手型
      • 10.const問題
      • 11.event.srcElement問題
      • 12.Firefox不支持innerText
      • 13.獲取鼠標在頁面上的位置
      • 14.獲取鍵盤事件的鍵值
      • 15.IE6不支持min-height
      • 16.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開始采用的內核，后來的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中首次被使用，該款引擎的特點就是渲染速度的優化達到了極致，然而代價是犧牲了網頁的兼容性。實際上這是一個動態內核，與前面幾個內核的最大的區別就在腳本處理上。

瀏覽器內核

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樣式里添加如下代碼：

<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

總結

以上是生活随笔為你收集整理的【前端兼容性】常见的浏览器兼容问题及解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。