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