溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了瀏覽器內核及兼容的問題實例分析的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇瀏覽器內核及兼容的問題實例分析文章都會有所收獲，下面我們一起來看看吧。
一、瀏覽器內核
 RenderingEngine，中文翻譯過來名稱很多，排版引擎、解釋引擎、渲染引擎，現在流行稱為瀏覽器內核。用來渲染網頁內容的，將網頁的內容和排版代碼轉換為可視的頁面，一個瀏覽器可能不止有一個內核。
1、排版引擎
（1）Trident（Windows）360IE
（2）Gecko（跨平臺）MozillaFirefox、MozillaSeaMonkey
（3）KHTML（Linux）Konqueror
（4）WebKit（跨平臺）AppleSafari、Symbian系統瀏覽器
（5）Chromium（跨平臺）Chromium、GoogleChrome、SRWareIron、ComodoDragon
（6）Presto（跨平臺）Opera
瀏覽器 內核
IE、百度、世界之窗 Trident
chrome、opera chromium或稱Blink
360、獵豹、2345瀏覽器 IE+chromium
Firefox Gecko
Safari Webkit
搜狗、遨游、QQ瀏覽器 trident+webkit
2、JavaScript引擎
（1）Chakra
查克拉，IE9啟用的新的JavaScript引擎。
（2）SpiderMonkey/TraceMonkey/JaegerMonkey
SpiderMonkey應用在MozillaFirefox1.0-3.0，TraceMonkey應用在MozillaFirefox3.5-3.6版本，JaegerMonkey應用在MozillaFirefox4.0及后續的版本。
（3）V8
應用于Chrome、傲游3。
（4）Nitro
應用于Safari4及后續的版本。
（5）LinearA/LinearB/Futhark/Carakan
LinearA應用于Opera4.0-6.1版本，LinearB應用于Opera7.0～9.2版本，Futhark應用于Opera9.5-10.2版本，Carakan應用于Opera10.5及后續的版本。
（6）KJS
KHTML對應的JavaScript引擎。
3、單雙核引擎
（1）Trident/Gecko雙核瀏覽器
（2）Trident/WebKit雙核瀏覽器
現在國內最主流的“雙核”瀏覽器基本都是這個架構，360極速瀏覽器、世界之窗瀏覽器極速版、傲游3搜狗瀏覽器3、QQ瀏覽器、楓樹瀏覽器、快快瀏覽器、百度瀏覽器、阿云瀏覽器（后期版本）、太陽花瀏覽器，其中最奇葩的是傲游3。其它雙核瀏覽器都是基于Chromium的，而傲游是基于WebKit的，但是偏偏又用的是V8引擎。
（3）Trident/Gecko/WebKit三核瀏覽器
目前能見的應該就是日本的Lunascape，Avant增加了WebKit內核之后也會歸類到這里。說實話，Lunascape真的很難用，真的很奇葩。各個內核相對獨立，外殼本身不夠強化，穩定性不高，所以還不如用回單核瀏覽器。
二、兼容性問題
對瀏覽器兼容問題，一般分，HTML，Javascript兼容，CSS兼容。其中html相關問題比較容易處理，無非是高版本瀏覽器用了低版本瀏覽器無法識別的元素，導致其不能解析，所以平時注意一點就是。特別是HTML5增加了許多新標簽，低版本瀏覽器有點影響時代進步啊
1、css兼容
（1）不同瀏覽器的margin和padding的默認設置差距大，使用*{margin:0px;padding:0px;}
（2）ie6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度.在此標簽中加入overflow:hidden
（3）圖片默認有間距,使用float
（4）盒子坍塌，父元素加入（overflow:hidden；）變成BFC元素
（5）字體大小在不同瀏覽器里不一致，使用line-height:14px;指定高度
（6）IE6不支持png透明效果
（7）CSSHack兼容性屬性設置
2、html兼容
HTML篇
（1）樣式兼容性問題
<!--IE按Edge模式渲染-->
<metahttp-equiv="X-UA-Compatible"content="IE=Edge"/>
<!--IE8910按IE7模式渲染-->
<metahttp-equiv="X-UA-Compatible"content="IE=Emulate7"/>
（2）怪異模式
怪異模式是沒有遵守W3C規范的一種兼容模式，其中的width是包括contentWidth,左右padding,左右border在內的全部范圍(height也一樣)，類似于box-sizing:border-box;，而且table的font-size不能從父元素繼承。以下情況會觸發瀏覽器怪異模式(QuirksMode):
沒寫DOCTYPE觸發怪異模式
在<!DOCTYPE...>前加<?xmlversion="1.0"encoding="utf-8"?>,IE6下會觸發怪異模式
在<!DOCTYPE...>前加入<!--keepIE7inQuirksMode-->,IE7進入怪異模式
<!DOCTYPE...>前有任何非空字符，會在IE6下會觸發怪異模式
<!DOCTYPE...>前有XML，在IE7下不會觸發怪異模式，但不能有其他非空字符
檢查document.compatMode,可以查看瀏覽器工作在哪個模式：值BackCompat為怪異模式，值CSS1Compat為標準模式
（3）display:inline-block元素間有間隙
<!--以下的li元素是display:inline;類型的-->
<!--這樣寫元素之間有間隙-->
<ul>
<li>apple</li>
<li>banana</li>
<li>pineapple</li>
<li>peach</li>
<li>orange</li>
</ul>
<!--換個寫法解決問題-->
<ul>
<li>apple</li><li>
banana</li><li>
pineapple</li><li>
peach</li><li>
orange</li>
</ul>
（4）IE可能出現的文檔樣式短暫失效問題
<head>
<!--meta部分-->
<title></title>
<!--可能的script部分-->
<scripttype="text/javascript"></script><!--關鍵：添加一個空標簽-->
<!--link部分-->
</head>
關于“瀏覽器內核及兼容的問題實例分析”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“瀏覽器內核及兼容的問題實例分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
