常見瀏覽器兼容

• • 前言
  • 一、常見瀏覽器內(nèi)核
  • • • 1.Trident內(nèi)核
      • 2.Gecko內(nèi)核
      • 3.Blink內(nèi)核
      • 4.Webkit內(nèi)核
      • 5.Presto內(nèi)核（已廢棄）
  • 二、常見兼容性問題
  • • • 1.不同瀏覽器的默認(rèn)margin和padding不一致
      • 2.圖片的默認(rèn)間距不一致
      • 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.獲取鼠標(biāo)在頁面上的位置
      • 14.獲取鍵盤事件的鍵值
      • 15.IE6不支持min-height
      • 16.IE兼容CSS3的background-size屬性
  • 總結(jié)

前言

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

一、常見瀏覽器內(nèi)核

1.Trident內(nèi)核

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

• 補(bǔ)充：IE從版本11開始，初步支持WebGL技術(shù)。IE8的JavaScript引擎是Jscript，IE9開始用Chakra，這兩個版本區(qū)別很大，Chakra無論是速度和標(biāo)準(zhǔn)化方面都很出色。

2.Gecko內(nèi)核

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

3.Blink內(nèi)核

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

4.Webkit內(nèi)核

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

5.Presto內(nèi)核（已廢棄）

??Presto（Opera前內(nèi)核） ： Opera12.17及更早版本曾經(jīng)采用的內(nèi)核，現(xiàn)已停止開發(fā)并廢棄，該內(nèi)核在2003年的Opera7中首次被使用，該款引擎的特點就是渲染速度的優(yōu)化達(dá)到了極致，然而代價是犧牲了網(wǎng)頁的兼容性。實際上這是一個動態(tài)內(nèi)核，與前面幾個內(nèi)核的最大的區(qū)別就在腳本處理上。

瀏覽器內(nèi)核

IE瀏覽器	Trident內(nèi)核，也是俗稱的IE內(nèi)核
Chrome瀏覽器（谷歌）	統(tǒng)稱Chromium內(nèi)核或Chrome內(nèi)核。以前是Webkit內(nèi)核，現(xiàn)在是Blink內(nèi)核
Firefox瀏覽器（火狐）	Gecko內(nèi)核，俗稱Firefox內(nèi)核
Safari瀏覽器	Webkit內(nèi)核
Opera瀏覽器（歐朋）	最初是自己的Presto內(nèi)核，后來是Webkit內(nèi)核，現(xiàn)在是Blink內(nèi)核
360瀏覽器	IE+Chrome雙內(nèi)核
獵豹瀏覽器	IE+Chrome雙內(nèi)核
UC瀏覽器	Trident（兼容模式）+Webkit（高速模式）
搜狗瀏覽器	Trident（兼容模式）+Webkit（高速模式）
百度瀏覽器	IE內(nèi)核
2345瀏覽器	IE內(nèi)核
QQ瀏覽器	Trident（兼容模式）+Webkit（高速模式）
遨游瀏覽器	Trident（兼容模式）+Webkit（高速模式）
世界之窗瀏覽器	最初為IE內(nèi)核，2013年采用IE+Chrome雙內(nèi)核

二、常見兼容性問題

1.不同瀏覽器的默認(rèn)margin和padding不一致

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

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

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

2.圖片的默認(rèn)間距不一致

• 解決方案
  使用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）

• 解決方案
  ?標(biāo)簽降級

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

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

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

5.Canvas（兼容IE8）

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

• 解決方案
  ?①添加對HTML5的支持（去網(wǎng)上下載一個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 中就更不一樣了。

• 解決方案
  統(tǒng)一指定行高 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(){ //第一個參數(shù)事件類型要加“on”前綴callback.call(obj); //統(tǒng)一this的值});} }

【PS】
??①addEventListener事件回調(diào)函數(shù)中的 this 指向綁定事件的對象；attachEvent事件回調(diào)函數(shù)中的 this 指向的是window，需要統(tǒng)一兩個方法的this。
??②addEventListener有第三個參數(shù)，true表示事件工作在捕獲階段，false為冒泡階段（默認(rèn)）；而attachEvent只能工作在冒泡階段。
??③解除事件方法標(biāo)準(zhǔn)方法removeListen()；在IE8中，對應(yīng)使用detachEvent()；注意，和上面的注冊方法要一一對應(yīng)。
??④阻止默認(rèn)事件標(biāo)準(zhǔn)方法event.preventDefault()；在IE8中，使用 event.returnValue = false;
??⑤阻止冒泡的方法event.stopPropagation()；在IE8中，使用 event.cancelBubble = true;
??⑥老版本 IE 中，事件函數(shù)內(nèi)部的 this 不是被監(jiān)聽元素本身，而是 window，故應(yīng)該使用 call 改變 this 指向。
??⑦addEventLister的第一個參數(shù)事件類型是不加“on”前綴的；而attachEvent中需要加“on”前綴;

9.cursor:hand 顯示手型

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

• 解決方案
  統(tǒng)一使用 cursor:pointer;

10.const問題

??Firefox下，可以使用const關(guān)鍵字來定義常量；IE下，只能使用var關(guān)鍵字來定義常量。

• 解決方案
  統(tǒng)一使用var關(guān)鍵字來定義常量。

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.獲取鼠標(biāo)在頁面上的位置

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

• 解決方案

//Firefox支持屬性 pageX 與 pageY 屬性，這兩個屬性已經(jīng)把頁面滾動計算在內(nèi)了 //在 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部分鍵值有效（如上下左右鍵），對數(shù)字鍵、字母鍵無效；
  ???event.which部分鍵值有效（如字母、數(shù)字鍵），對上下左右鍵、PgUp（33）、PgDn（34）鍵無效；
  ???event.charCode部分鍵值有效（如字母、數(shù)字鍵），對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; //內(nèi)容超出時顯示} </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>

總結(jié)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。