瀏覽器內(nèi)核以及解決兼容性的方法 瀏覽器內(nèi)核： 分類：
1.Trident（IE內(nèi)核）
Trident(IE內(nèi)核)：該內(nèi)核程序在1997年的IE4中首次被采用，是微軟在Mosaic代碼的基礎(chǔ)之上修改而來的，并沿用到IE11，也被普遍稱作”IE內(nèi)核”。Trident實(shí)際上是一款開放的內(nèi)核，其接口內(nèi)核設(shè)計的相當(dāng)成熟，因此才有許多采用IE內(nèi)核而非IE的瀏覽器(殼瀏覽器)涌現(xiàn)。
由于IE本身的“壟斷性”（雖然名義上IE并非壟斷，但實(shí)際上，特別是從Windows 95年代一直到XP初期，就市場占有率來說IE的確借助Windows的東風(fēng)處于“壟斷”的地位）而使得Trident內(nèi)核的長期一家獨(dú)大，微軟很長時間都并沒有更新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瀏覽器不安全的觀點(diǎn)，也有很多用戶轉(zhuǎn)向了其他瀏覽器， Firefox和Opera就是這個時候興起的。非Trident內(nèi)核瀏覽器的市場占有率大幅提高也致使許多網(wǎng)頁開發(fā)人員開始注意網(wǎng)頁標(biāo)準(zhǔn)和非IE瀏覽器的瀏覽效果問題。
2.Gecko(Firefox內(nèi)核)
Gecko(Firefox內(nèi)核)：開始采用的內(nèi)核，后來的火狐也采用了該內(nèi)核，Gecko的特點(diǎn)是代碼完全公開，因此，其可開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。因?yàn)檫@是個開源內(nèi)核，因此受到許多人的青睞，Gecko內(nèi)核的瀏覽器也很多，這也是Gecko內(nèi)核雖然年輕但市場占有率能夠迅速提高的重要原因。
事實(shí)上，GECKO的由來跟IE不無關(guān)系，前面說過IE沒有使用W3C的標(biāo)準(zhǔn)，這導(dǎo)致了微軟內(nèi)部一些開發(fā)人員的不滿；他們與當(dāng)時已經(jīng)停止更新了的 的一些員工一起創(chuàng)辦了Mozilla，以當(dāng)時的Mosaic內(nèi)核為基礎(chǔ)重新編寫內(nèi)核，于是開發(fā)出了Gecko。不過事實(shí)上，Gecko 內(nèi)核的瀏覽器仍然還是Firefox 用戶最多，所以有時也會被稱為Firefox內(nèi)核。此外Gecko也是一個跨平臺內(nèi)核，可以在Windows、 BSD、Linux和Mac OS X中使用。
補(bǔ)充：引擎是。
Gecko內(nèi)核常見的瀏覽器： 火狐、Mozilla 、（早期版本）、Flock（早期版本）、K-Meleon
3.Presto(Opera前內(nèi)核)
Presto(Opera前內(nèi)核) (已廢棄)： Opera12.17及更早版本曾經(jīng)采用的內(nèi)核，現(xiàn)已停止開發(fā)并廢棄，該內(nèi)核在2003年的Opera7中首次被使用，該款引擎的特點(diǎn)就是渲染速度的優(yōu)化達(dá)到了極致，然而代價是犧牲了網(wǎng)頁的兼容性。
實(shí)際上這是一個動態(tài)內(nèi)核，與前面幾個內(nèi)核的最大的區(qū)別就在腳本處理上，Presto有著天生的優(yōu)勢，頁面的全部或者部分都能夠在回應(yīng)腳本事件時等情況下被重新解析。此外該內(nèi)核在執(zhí)行Javascrīpt的時候有著最快的速度，根據(jù)在同等條件下的測試，Presto內(nèi)核執(zhí)行同等Javascrīpt所需的時間僅有Trident和Gecko內(nèi)核的約1/3（Trident內(nèi)核最慢，不過兩者相差沒有多大），本文的其中一個修改者認(rèn)為上述測試信息過于老舊且不完整，因?yàn)樗鲞^的小測試顯示Presto部分快部分慢，各內(nèi)核總體相當(dāng)。那次測試的時候因?yàn)锳pple機(jī)的硬件條件和普通PC機(jī)不同所以沒有測試WebCore內(nèi)核。只可惜Presto是商業(yè)引擎，使用Presto的除開Opera以外，只剩下、Wii Channle、Nokia 770網(wǎng)絡(luò)瀏覽器等，這很大程度上限制了Presto的發(fā)展。Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核。
4.Webkit(Safari內(nèi)核,Chrome內(nèi)核原型,開源)
Webkit(Safari內(nèi)核,Chrome內(nèi)核原型,開源):它是蘋果公司自己的內(nèi)核，也是蘋果的safari瀏覽器使用的內(nèi)核。
WebKit內(nèi)核常見的瀏覽器：傲游瀏覽器3、Symbian手機(jī)瀏覽器、Android 默認(rèn)瀏覽器。
5.Blink
Blink是一個由Google和Opera 開發(fā)的瀏覽器排版引擎，Google計劃將這個渲染引擎作為計劃的一部分，并且在2013年4月的時候公布了這一消息。這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用。
瀏覽器內(nèi)核的優(yōu)缺點(diǎn)
Trident：這種瀏覽器內(nèi)核是ie用的內(nèi)核，因?yàn)樵谠缙贗E占有大量的市場份額，所以這種內(nèi)核比較流行，以前有很多網(wǎng)頁也是根據(jù)這個內(nèi)核的標(biāo)準(zhǔn)來編寫的，但是實(shí)際上這個內(nèi)核對真正的網(wǎng)頁標(biāo)準(zhǔn)支持不是很好，甚至在2005年，與網(wǎng)頁標(biāo)準(zhǔn)制定組織(W3C理事會)所制定的標(biāo)準(zhǔn)發(fā)生了脫節(jié)，同時 Trident 內(nèi)核本身的BUG比較多，對一些符合W3C標(biāo)準(zhǔn)的網(wǎng)頁代碼支持不是很好，這在早期的IE版本中比較明顯，比如IE5.5以前(包括IE5.5)，其實(shí)ie6對W3C標(biāo)準(zhǔn)的支持也不是很好，而我們現(xiàn)在很多人都在使用IE6，事實(shí)上它也屬于一個比較早的版本。
但是由于IE的高市場占有率，微軟也很長時間沒有更新Trident內(nèi)核，這導(dǎo)致了二個結(jié)果
1，Trident內(nèi)核和W3C標(biāo)準(zhǔn)脫節(jié)。
2，Trident內(nèi)核的大量Bug等安全問題沒有得到解決，加上一些專家學(xué)者公開自己認(rèn)為IE瀏覽器不安全的觀點(diǎn)，使很多用戶開始轉(zhuǎn)向其他瀏覽器，F(xiàn)F,Opera就是這時期興起的。
Gecko：這是Firefox 和 Flock 所采用內(nèi)核，這個內(nèi)核的優(yōu)點(diǎn)就是功能強(qiáng)大、豐富，可以支持很多復(fù)雜網(wǎng)頁效果和瀏覽器擴(kuò)展接口，但是代價是也顯而易見就是要消耗很多的資源，比如內(nèi)存。
Presto：Opera 采用的是 Presto內(nèi)核，Presto內(nèi)核被稱為公認(rèn)的瀏覽網(wǎng)頁速度最快的內(nèi)核，這得益于它在開發(fā)時的天生優(yōu)勢，在處理JS腳本等腳本語言時，會比其他的內(nèi)核快3倍左右，缺點(diǎn)就是為了達(dá)到很快的速度而丟掉了一部分網(wǎng)頁兼容性。
Webkit：Webkit 是 Safari 采用的內(nèi)核，不過 Safari 是蘋果系統(tǒng)下的瀏覽器(雖然也有windows版，但是比較少)，所以只簡單介紹一下這個內(nèi)核的優(yōu)點(diǎn)和缺點(diǎn)，優(yōu)點(diǎn)就是網(wǎng)頁瀏覽速度較快，雖然不及 Presto 但是也勝于 Gecko 和 Trident，缺點(diǎn)是對于網(wǎng)頁代碼的容錯性不高，也就是說對網(wǎng)頁代碼的兼容性較低，會使一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正確顯示。
總結(jié)：就瀏覽器來說，互聯(lián)網(wǎng)經(jīng)歷了十年的高速發(fā)展期，近幾年市場上也推出了很多新的瀏覽器，但是他們并非是采用自主開發(fā)的內(nèi)核，所以瀏覽器內(nèi)核本身實(shí)際沒有實(shí)質(zhì)突破。
主瀏覽器所使用的內(nèi)核分類
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等
Gecko內(nèi)核：及以上版本，F(xiàn)F,/等
Presto內(nèi)核：Opera7及以上
Webkit內(nèi)核：Safari,Chrome等
一、兼容性產(chǎn)生原因：
因?yàn)椴煌瑸g覽器使用內(nèi)核及所支持的HTML等網(wǎng)頁語言標(biāo)準(zhǔn)不同；以及用戶客戶端的環(huán)境不同（如分辨率不同）造成的顯示效果不能達(dá)到理想效果。最常見的問題就是網(wǎng)頁元素位置混亂，錯位。兼容性產(chǎn)生原因主要是內(nèi)核或內(nèi)核的版本不一樣；
二、瀏覽器對網(wǎng)頁兼容支持的解析模式：
1、為什么會有那么多模式？
由于歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在W3C標(biāo)準(zhǔn)出臺以前，瀏覽器在對頁面的渲染上沒有統(tǒng)一規(guī)范，產(chǎn)生了差異(Quirks mode或者稱為 Mode)；由于W3C標(biāo)準(zhǔn)的推出，瀏覽器渲染頁面有了統(tǒng)一的標(biāo)準(zhǔn)(或稱為Strict mode也有叫做 mode)，這就是二者最簡單的區(qū)別。
2、瀏覽器采用哪種模式進(jìn)行解析呢？
火狐一直工作在標(biāo)準(zhǔn)模式下，但I(xiàn)E（6，7，8）標(biāo)準(zhǔn)模式與怪異模式差別很大， 主要體現(xiàn)在對盒子模型的解釋上，
那么瀏覽器究竟該采用哪種模式渲染呢？這就 引出的DTD，既是網(wǎng)頁的頭部聲明，瀏覽器會通過識別DTD而采用相對應(yīng)的渲染模式：
\1. 瀏覽器要使老舊的網(wǎng)頁正常工作，但這部分網(wǎng)頁是沒有doctype聲明的，所以 瀏覽器對沒有doctype聲明的網(wǎng)頁采用quirks mode解析。
\2. 對于擁有doctype聲明的網(wǎng)頁，什么瀏覽器采用何種模式解析，這里有一張詳細(xì)列表可參考：。
\3. 對于擁有doctype聲明的網(wǎng)頁，這里有幾條簡單的規(guī)則可用于判斷： 對于那些瀏覽器不能識別的doctype聲明，瀏覽器采用strict mode解析。
\4. 在doctype聲明中， 沒有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時，基本所有的瀏覽器都是使用quirks mode呈現(xiàn)，其他的則使用strict mode解析。
\5. 可以這么說，在 現(xiàn)有有doctype聲明的網(wǎng)頁，絕大多數(shù)是采用strict mode進(jìn)行解析的。
\6. 在ie6中，如果在doctype聲明前有一個xml聲明(比如:)，則采用quirks mode解析。這條規(guī)則在ie7中已經(jīng)移除了。
3、如何設(shè)置為怪異模式（quirks mode）和標(biāo)準(zhǔn)模式（strict mode）：
3.1、設(shè)置怪異模式：
方法一：在頁面項部加
方法二：什么也不加。
3.2、設(shè)置為標(biāo)準(zhǔn)模式：
加入以下任意一種：HTML4提供了三種DOCTYPE可選擇：
DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
XHTML1.0提供了三種DOCTYPE可選擇：
(1)過渡型（ ）
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
(2)嚴(yán)格型（Strict ）
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
(3)框架型（ ）
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
備注：過渡型和嚴(yán)格型的區(qū)別：
只是為了實(shí)現(xiàn)從舊時代到新時代的過渡，而且Strict 是默認(rèn)的文檔聲明， 對構(gòu)造HTML 4.01和XHTML 1.0都適用。
使用 DOCTYPE一般是由于代碼中含有過多陳舊的寫法，并且一下子很難完全轉(zhuǎn)換到Strict DOCTYPE來。但是Strict DOCTYPE才應(yīng)該是你的目標(biāo)。它鼓勵甚至有時是強(qiáng)迫你把結(jié)構(gòu)與表現(xiàn)區(qū)分開來，把表現(xiàn)層的代碼都寫在CSS里，將結(jié)構(gòu)和表現(xiàn)分開，使得維護(hù)一個站點(diǎn)非常容易。
對于準(zhǔn)備向Strict進(jìn)發(fā)的人來說，兩者的有些區(qū)別很可能會使開發(fā)者犯錯誤，接下來我將會談到。 在Strict 下不支持的標(biāo)簽 **：**center font iframe srike u 在Strict 下不支持的屬性 align (表格相關(guān)的支持：col, , tbody, td, tfoot, th, thead, and tr) bgcolor border (table支持) height (img和object支持) hspace name (在HTML 4.01 Strict中支持，XHTML 1.0 Strict中的form和img不支持) noshade nowrap target text, link, vlink, 和alink vspace width (img, object, table, col, 和 都支持) 內(nèi)容模型的區(qū)別
元素類型的內(nèi)容模型描述了什么樣的元素類型實(shí)例可以被包含。這一點(diǎn)上，兩種文檔聲明的最大區(qū)別在于, body, 和form元素僅能夠包含塊級元素，如： 文本和圖像不允許直接包含在body中，必須被p或者div等塊級元素包含 input元素不能直接是form元素的下一層 元素內(nèi)的文本，必須被p或者div等塊級元素包含 將所有的表現(xiàn)都交給CSS，恪守Strict標(biāo)準(zhǔn)
在向Strict 過渡的過程中，了解每個元素是做什么的比知道每個元素長啥樣有效的多。
4、如何判定現(xiàn)在是標(biāo)準(zhǔn)模式還是怪異模式：
方法一：執(zhí)行以下代碼
alert(patMode) ;
// 表示怪異模式
// 表示標(biāo)準(zhǔn)模式
方法二：jquery為我們提供的方法，如下：
alert($.)
alert($.support.)
三、不同瀏覽器間的兼容問題及解決方法
1、 CSS resert： **抹去不同瀏覽器的默認(rèn)屬性，使得不同瀏覽器兼容性問題降到最低，**最好可以根據(jù)項目情況設(shè)置css resert代碼。
? 缺點(diǎn)主要是：抹去瀏覽器默認(rèn)屬性、在瀏覽器調(diào)式工具有大量繼承鏈
2、CSS hack
2.1 定義：CSS hack由于不同廠商的瀏覽器，比如 ,Safari,火狐,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認(rèn)識不完全一樣，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要 **針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，**能在不同的瀏覽器中也能得到我們想要的頁面效果， *CSS hack書寫順序，一般是將適用范圍廣、被識別能力強(qiáng)的CSS定義在前面。*
2.2 分類
CSS Hack大致有3種表現(xiàn)形式， **CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，**實(shí)際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。
解決兼容性的辦法： 一、樣式初始化
由于各大瀏覽器會有自身的默認(rèn)樣式，并且不盡相同，所以為了盡可能的保證樣式的統(tǒng)一性，前端在開發(fā)項目之前都會先進(jìn)行樣式格式化，最常見的分為以下幾個方面。
1. 值和 margin 值均設(shè)置為 0
將html、body、a、li、ol、input、、select、button 等標(biāo)簽的 padding 值和 margin 值設(shè)置為 0。
2.html 標(biāo)簽
設(shè)置統(tǒng)一的字體，如果使用 rem 單位，則 html 需要設(shè)置合適的字號。
3.a 標(biāo)簽
設(shè)置統(tǒng)一的顏色，將 text- 屬性設(shè)置為 none。
4.ol 和 li 標(biāo)簽
list-style 統(tǒng)一設(shè)置為 none。
5.input、、select、button 等標(biāo)簽初始化
border 設(shè)置為 none；
二、使用不同類型的瀏覽器內(nèi)核前綴
1.Chrome（谷歌瀏覽器） 與 Safari（蘋果瀏覽器） 內(nèi)核：Webkit （中譯無） 前綴：-webkit-
2.IE （IE瀏覽器） 內(nèi)核：Trident （中譯三叉戟） 前綴：-ms-
3.Firefox （火狐瀏覽器） 內(nèi)核：Gecko（中譯壁虎） 前綴：-moz-
4.Opera （歐朋瀏覽器） 內(nèi)核：Presto（中譯迅速） 前綴：-o-
-webkit-border-radius: 10px; /*谷歌瀏覽器*/
-ms-border-radius: 10px; /*IE瀏覽器*/
-moz-border-radius: 10px; /*火狐瀏覽器*/
-o-border-radius: 10px; /*歐朋瀏覽器*/
border-radius: 10px;
三、針對IE瀏覽器不同版本的解決方案（CSS hack）;
1.對于低版本的 IE 瀏覽器使用 CSS hack（ 即給特點(diǎn)前綴）
注：以下符號是寫在屬性名前面。
兼容 IE6 的 hack 符號：- 或 _
兼容 IE6 、7 的 hack 符號：` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 任意一個符號
兼容 IE6、7、8 的 hack 符號：.
注：以下符號是寫在屬性值與分號直接，中間不留空格。
兼容 IE8 的 hack 符號：\0/
兼容 IE8、9、10 的 hack 符號：\0
兼容 IE6、7、8、9、10 的 hack 符號：\9
/*hack符號在前*/
_border-radius: 10px; /*IE6*/
+border-radius: 10px; /*IE6\7*/
.border-radius: 10px; /*IE6\7\8*/
/*hack符號在后*/
border-radius: 10px\0/; /*IE8*/
border-radius: 10px\0; /*IE8\9\10*/
border-radius: 10px\9; /*IE6\7\8\9\10*/
2.為不同的版本編寫?yīng)毩⒌臉邮剑渌麨g覽器識別不到。
大于 IE9 的瀏覽器使用這個單獨(dú)的 style9.css 樣式
只有 IE6 瀏覽器使用的 style6.css 樣式
四、其他特殊樣式
1.cursor 屬性的 hand 值和 pointer 值
問題：firefox 瀏覽器不支持 hand 值，但其他瀏覽器均支持 pointer 值。
解決: 統(tǒng)一使用 cursor 屬性的 pointer 值。
2.水平居中
問題：IE8 及IE8 以下版本瀏覽器不可通過設(shè)置 margin:0 auto 實(shí)現(xiàn)水平居中。
解決: 可通過設(shè)置父級 text-align:center 實(shí)現(xiàn)。
3.屬性值 "inherit"
問題：IE8 及IE8 以下版本瀏覽器不支持屬性值 “inherit”。
解決：謹(jǐn)慎使用屬性值 “inherit”。
五、JS兼容性
1.ES6語法
問題：IE11 不支持箭頭函數(shù)、class 語法等（報 : 語法錯誤），不支持 Set 和 Map 數(shù)據(jù)結(jié)構(gòu)（不報錯）及 Promise 對象，支持 let 和 const，IE10 及以下不支持任何 ES6 語法。
解決：如果要兼容IE瀏覽器的項目請使用 ES5 語法或者使用 Babel 進(jìn)行轉(zhuǎn)換。
2.操作 tr 標(biāo)簽
問題：IE9 及 IE9 以下版本瀏覽器，不能操作 tr 標(biāo)簽的 屬性。
解決：可以操作 td 標(biāo)簽的 屬性。
3.Ajax
問題：IE9 及 IE9 以下版本瀏覽器無法使用 Ajax 獲取接口數(shù)據(jù)。
解決：在使用 Ajax 請求之前設(shè)置 jQuery.support.cors=true。
4.event 對象的 屬性
問題：IE8 及 IE8 以下版本瀏覽器 event 對象只有 屬性，沒有 target 屬性。
解決：obj = event.target?event.target:event.。
5.DOM 事件綁定
問題：IE8 及 IE8 以下版本瀏覽器是用 () 方法，而其他瀏覽器是 () 方法。
解決：判斷 IE 瀏覽器版本，如果是 IE8 及以下 事件綁定則使用 () 方法，注意 () 方法的用法，第一個參數(shù)為“onclick” 而不是“click”。并且沒有第三個參數(shù)。