瀏覽器內核對網頁解析不一致主要體現在設計人員的代碼書寫不規範，以下是小編蒐集整理的一篇探究瀏覽器相容性產生原因的論文範文，歡迎閱讀檢視。
隨着時代的發展，互聯網已經成爲大家生活中重要的一部分，截止到2014年6月，網民人數達到6.32億，網站的發展也日益上升，主流的瀏覽器主要包括Firefox、Opera、chrome、IE、safari等，不同的瀏覽器使用的瀏覽器內核不一樣，導致不同瀏覽器對網頁的解析不一致，因此導致網頁展示出現差異，例如出現排版不正確、字型大小不一致、圖片展示有差異等，這被稱爲“瀏覽器相容性”[1].因此，網站開發者不斷研究網頁標準，讓用戶可以在任意瀏覽器中瀏覽同一個頁面達到一樣的效果。
1國內外研究和發展概況
在衆多品牌的瀏覽器中，使用比例較高的是：IE、GoogleChrome、Safari、Opera、Firefox;在國內外，都沒有能解決網站相容性的方法和工具，開發人員一般是針對不同的相容性問題使用不同的解決辦法。一般透過使用CSS樣式控制，以及腳本判斷瀏覽器的品牌及版本，並賦予該瀏覽器的樣式控制或是腳本控制，使同個頁面在不同瀏覽器顯示一樣的效果。
2瀏覽器相容性產生原因
在版面設計中，產生瀏覽器相容性問題的主要原因是不同瀏覽器內核和不同瀏覽器版本對網頁代碼解析不一致，例如瀏覽器對HTML、CSS屬性的支援不一致;對腳本語言的支援不一致;網頁設計人員編寫規範存在問題，不符合W3C標準;以及用戶使用的設備分辨率不一致，容易產生網頁錯位，元素顯示不全，圖片顯示不一致等問題。
3瀏覽器相容性問題具體分析
瀏覽器內核不一致，使瀏覽器對網頁的CSS解析不一致，從而導致網頁在某些瀏覽器中出現排版不正確、圖片顯示不完整等一系列相容性問題。目前市場上主要瀏覽器內核爲：
(1)IE6/7/8/9/10,360安全瀏覽器、360極速瀏覽器、遨遊瀏覽器、世界之窗瀏覽器、SOGOU瀏覽器主要使用Trident內核。
(2)MozillaFirefox使用Gecko內核。
(3)Applesafari、GoogleChrome,遨遊3,Opera瀏覽器使用WEBKIT內核。
(4)Chrome(28及往後版本)、Opera(15及往後版本)和YANDEX瀏覽器使用Blink內核。
3.1瀏覽器內核對網頁解析不一致具體問題分析
瀏覽器內核對網頁解析不一致主要體現在設計人員的代碼書寫不規範，書寫不規範主要體現在CSS括號問題;屬性和值用等號連接;在左大括號前多一個“,”;以及使用!important聲明沒“;”.
3.1.1CSS括號問題
關於左右大括號書寫情況主要有以下幾種：
(1)CSS的多餘右括號：IE7以下版本的IE瀏覽器，瀏覽器會忽略多餘的右括號，選擇器解析正常。IE8以上的版本包括IE8/Firefox/Chrome/Safari/Opera,CSS多餘的右括號會導致下一個選擇器無法正常解析，如圖2的CSS代碼“,.red”出現多餘的右括號，則圖3IE7以下版本顯示正常，圖4IE8以上版本及Firefox/Chrome/Safari/Opera等瀏覽器會導致下一個選擇器無法正常解析。
(2)未閉合的大括號。如圖5所示代碼，IE5.5瀏覽器可以會找到最相近的閉合右括號，導致第二個選擇器解析錯誤，以下的.選擇器解析正常。
在IE6以上版和Firefox、Chrome、Safari、Opera中，瀏覽器會以最後一個選擇器的閉合右括號，導致只有第一個選擇器解析正常，其他都解析錯誤。
(3)多餘的左括號。IE7以下版本，未閉合的左大括號會把CSS中最後一個聲明的CSS右括號作爲結束的括號。而中間的內容：
“{background-color:red;}.yellow{background-color:yellow;}.
blue{background-color:blue;”會被瀏覽器解析爲錯誤的聲明。
(4)多餘的左括號位於選擇器前面。IE5.5瀏覽器會解析爲左大括號會跟後面的選擇器連在一起，導致該選擇器出錯，但是不影響瀏覽器對下面選擇器的解析。
在Opera、Firefox、Safari、IE6版本以上、Chrome等瀏覽器則認爲左大括號把最後一個右大括號作爲結束符號，是一個聲明塊。
3.1.2屬性和值用等號連接
實驗演示結果如下圖6的代碼，IE5.5瀏覽器會直接把等號解析爲規範的CSS符號“:”,所以該符號解析爲正常，如圖7.
IE6以上版本瀏覽器會解析爲那是錯誤的CSS聲明，導致瀏覽器直接忽略該屬性，選擇器值失效爲空，如圖8.
3.1.3在左大括號前多一個“,”.
代碼如圖9,第一種情況瀏覽器直接忽略“,”,所以選擇器解析正常。
第二種情況瀏覽器會把該選擇器解析爲失效。
3.1.4使用!important聲明沒“;”.
IE7瀏覽器會正常解釋第一個!important,IE8只可以解釋最後一個!important,Firefox、safari、chrome、opera會解析爲錯誤的代碼;實驗結果如圖10,圖11,圖12.
3.2像素問題
(1)瀏覽器對含小數值的像素解析不一致。每一個瀏覽器對於含小數值的像素解析都存在不一致的地方。例如11.8px,Firefox/GoogleChrome/Opera/IE8取值爲12px;IE6/7/Safari會取值爲11px;IE9以上的版本會直接解析爲11.8px;在做網頁相容的時候，要是遇到在IE6/7/safari中設定文字大小爲11px;可以使用該方法，直接把文字大小設定爲11.8就可以達到目的了。這樣還可以省下一個CSSHACK.(2)PX、EM和REM的使用對網頁版面的影響。PX是絕對單位，而EM是相對單位，在設定字型大小的時候，最好使用EM;當用IE調整網頁自由縮放的時候，PX不會做出任何的反應，而EM則可以隨着頁面的縮放而縮放，默認的1em=16px;而EM是相對值，會繼承其父級元素的字型大小，如果全局變量中設定了“body{font-size:12px;}”;則1em=12px;而REM是一個CSS3新增的一個相對單位，REM就是根EM,REM是相對於HTML的根元素，只要調整根元素的大小就可以調整一個頁面的字型大小，並且該屬性IE8以上的版本都可識別，包括其他瀏覽器都能支援，如果不能支援，則可以使用P{font-size:12px;font-size:2rem;}.
3.3DOCTYPE(文檔類型)影響CSS解析
IE依靠DOCTYPE判斷一個網頁該按什麼標準渲染，渲染的意思是瀏覽器對網頁進行排版，文檔類型聲明引用DTD(文檔類型定義)，文檔類型聲明會告訴瀏覽器該採取什麼標準讀取該網頁。
HTML有多個版本，HTML、HTML+、HTML2.0、HTML3.2、HTML4.01、HTML1.0、HTML5、XHTML5,在每個版本中，文檔聲明都存在不一致，總結如下：(1)HTML4.01Strict--包含所有HTML元素和屬性，但不包括展示性的和棄用的元素(比如font)並且不允許框架集(Framesets)。
(2)HTML4.01Transitional--包含所有HTML元素和屬性，包括展示性的和棄用的元素(比如font)並且不允許框架集(Framesets)。(3)HTML4.01Frame-set--包含所有HTML元素和屬性，包括展示性的和棄用的元素(比如font)並且允許使用框架集(Framesets)。(4)XHTML1.0Strict--與HTML4.01Strict一致，但必須以正確的XML格式編寫標記。(5)XHTML1.0Transitional---與HTML4.01Transitional-一致，但必須以正確的XML格式編寫標記。(6)XHTML1.0Framesets--與HTML4.0Transi-tional一致，但可使用框架集。文檔類型不正確就會導致無法正確讀取相應的HTML和CSS,導致網頁出現相容性問題。
3.4浮動元素對容器的影響
(1)設定Height導致的問題。Firefox設定height就不會使內容被撐大，但是IE設定height會導致內容撐大，導致height失效，所以最好不要設定height.(2)內容橫向上撐破容器問題。如果含float屬性的容器未定義寬度，內容會橫向撐開容器寬度，IE會把內容拆行，所以內容容易撐破浮動容器的需要定義寬度。
4結語
本文具體分析了瀏覽器不同內核不同版本對網頁解析不同而存在的相容性問題，包括網頁設計人員代碼編寫不規範，版面設計中像素的使用問題，文檔類型影響瀏覽器對CSS解析，浮動元素對版面佈局的影響等，對網頁設計具有一定的參考意義，也爲網站開發人員尋找更好的方法解決相容性問題提供幫助。(圖略)
參考文獻
[1]李燁.別具光芒CSS屬性.瀏覽器相容與網頁佈局[M].人民郵電出版社，2008.
[2]劉增傑，史豔豔，劉玉萍.精通HTML+CSS網頁佈局與樣式[M].清華大學出版社，2013.
[3]高洪濤.HTML+CSS網站開發兵書[M].電子工業出版社，2013.
[4](美)達科特(DUCKETT,J).HTML&CSS設計與構建網站[M].清華大學出版社，2013.