網頁設計中瀏覽器兼容性成因及具體問題分析
瀏覽器內核對網頁解析不一致主要體現在設計人員的代碼書寫不規范，以下是小編搜集整理的一篇探究瀏覽器兼容性產生原因的論文范文，歡迎閱讀查看。
隨著時代的發展，互聯網已經成為大家生活中重要的一部分，截止到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.
【網頁設計中瀏覽器兼容性成因及具體問題分析】相關文章：