- 相關(guān)推薦
網(wǎng)頁(yè)設計中瀏覽器兼容性成因及具體問(wèn)題分析
瀏覽器內核對網(wǎng)頁(yè)解析不一致主要體現在設計人員的代碼書(shū)寫(xiě)不規范，以下是小編搜集整理的一篇探究瀏覽器兼容性產(chǎn)生原因的論文范文，歡迎閱讀查看。
隨著(zhù)時(shí)代的發(fā)展，互聯(lián)網(wǎng)已經(jīng)成為大家生活中重要的一部分，截止到2014年6月，網(wǎng)民人數達到6.32億，網(wǎng)站的發(fā)展也日益上升，主流的瀏覽器主要包括Firefox、Opera、chrome、IE、safari等，不同的瀏覽器使用的瀏覽器內核不一樣，導致不同瀏覽器對網(wǎng)頁(yè)的解析不一致，因此導致網(wǎng)頁(yè)展示出現差異，例如出現排版不正確、字體大小不一致、圖片展示有差異等，這被稱(chēng)為“瀏覽器兼容性”[1].因此，網(wǎng)站開(kāi)發(fā)者不斷研究網(wǎng)頁(yè)標準，讓用戶(hù)可以在任意瀏覽器中瀏覽同一個(gè)頁(yè)面達到一樣的效果。
1國內外研究和發(fā)展概況
在眾多品牌的瀏覽器中，使用比例較高的是：IE、GoogleChrome、Safari、Opera、Firefox;在國內外，都沒(méi)有能解決網(wǎng)站兼容性的方法和工具，開(kāi)發(fā)人員一般是針對不同的兼容性問(wèn)題使用不同的解決辦法。一般通過(guò)使用CSS樣式控制，以及腳本判斷瀏覽器的品牌及版本，并賦予該瀏覽器的樣式控制或是腳本控制，使同個(gè)頁(yè)面在不同瀏覽器顯示一樣的效果。
2瀏覽器兼容性產(chǎn)生原因
在版面設計中，產(chǎn)生瀏覽器兼容性問(wèn)題的主要原因是不同瀏覽器內核和不同瀏覽器版本對網(wǎng)頁(yè)代碼解析不一致，例如瀏覽器對HTML、CSS屬性的支持不一致;對腳本語(yǔ)言的支持不一致;網(wǎng)頁(yè)設計人員編寫(xiě)規范存在問(wèn)題，不符合W3C標準;以及用戶(hù)使用的設備分辨率不一致，容易產(chǎn)生網(wǎng)頁(yè)錯位，元素顯示不全，圖片顯示不一致等問(wèn)題。
3瀏覽器兼容性問(wèn)題具體分析
瀏覽器內核不一致，使瀏覽器對網(wǎng)頁(yè)的CSS解析不一致，從而導致網(wǎng)頁(yè)在某些瀏覽器中出現排版不正確、圖片顯示不完整等一系列兼容性問(wèn)題。目前市場(chǎng)上主要瀏覽器內核為：
(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瀏覽器內核對網(wǎng)頁(yè)解析不一致具體問(wèn)題分析
瀏覽器內核對網(wǎng)頁(yè)解析不一致主要體現在設計人員的代碼書(shū)寫(xiě)不規范，書(shū)寫(xiě)不規范主要體現在CSS括號問(wèn)題;屬性和值用等號連接;在左大括號前多一個(gè)“,”;以及使用!important聲明沒(méi)“;”.
3.1.1CSS括號問(wèn)題
關(guān)于左右大括號書(shū)寫(xiě)情況主要有以下幾種：
(1)CSS的多余右括號：IE7以下版本的IE瀏覽器，瀏覽器會(huì )忽略多余的右括號，選擇器解析正常。IE8以上的版本包括IE8/Firefox/Chrome/Safari/Opera,CSS多余的右括號會(huì )導致下一個(gè)選擇器無(wú)法正常解析，如圖2的CSS代碼“,.red”出現多余的右括號，則圖3IE7以下版本顯示正常，圖4IE8以上版本及Firefox/Chrome/Safari/Opera等瀏覽器會(huì )導致下一個(gè)選擇器無(wú)法正常解析。
(2)未閉合的大括號。如圖5所示代碼，IE5.5瀏覽器可以會(huì )找到最相近的閉合右括號，導致第二個(gè)選擇器解析錯誤，以下的選擇器解析正常。
在IE6以上版和Firefox、Chrome、Safari、Opera中，瀏覽器會(huì )以最后一個(gè)選擇器的閉合右括號，導致只有第一個(gè)選擇器解析正常，其他都解析錯誤。
(3)多余的左括號。IE7以下版本，未閉合的左大括號會(huì )把CSS中最后一個(gè)聲明的CSS右括號作為結束的括號。而中間的內容：
“{background-color:red;}.yellow{background-color:yellow;}.
blue{background-color:blue;”會(huì )被瀏覽器解析為錯誤的聲明。
(4)多余的左括號位于選擇器前面。IE5.5瀏覽器會(huì )解析為左大括號會(huì )跟后面的選擇器連在一起，導致該選擇器出錯，但是不影響瀏覽器對下面選擇器的解析。
在Opera、Firefox、Safari、IE6版本以上、Chrome等瀏覽器則認為左大括號把最后一個(gè)右大括號作為結束符號，是一個(gè)聲明塊。
3.1.2屬性和值用等號連接
實(shí)驗演示結果如下圖6的代碼，IE5.5瀏覽器會(huì )直接把等號解析為規范的CSS符號“:”,所以該符號解析為正常，如圖7.
IE6以上版本瀏覽器會(huì )解析為那是錯誤的CSS聲明，導致瀏覽器直接忽略該屬性，選擇器值失效為空，如圖8.
3.1.3在左大括號前多一個(gè)“,”.
代碼如圖9,第一種情況瀏覽器直接忽略“,”,所以選擇器解析正常。
第二種情況瀏覽器會(huì )把該選擇器解析為失效。
3.1.4使用!important聲明沒(méi)“;”.
IE7瀏覽器會(huì )正常解釋第一個(gè)!important,IE8只可以解釋最后一個(gè)!important,Firefox、safari、chrome、opera會(huì )解析為錯誤的代碼;實(shí)驗結果如圖10,圖11,圖12.
3.2像素問(wèn)題
(1)瀏覽器對含小數值的像素解析不一致。每一個(gè)瀏覽器對于含小數值的像素解析都存在不一致的地方。例如11.8px,Firefox/GoogleChrome/Opera/IE8取值為12px;IE6/7/Safari會(huì )取值為11px;IE9以上的版本會(huì )直接解析為11.8px;在做網(wǎng)頁(yè)兼容的時(shí)候，要是遇到在IE6/7/safari中設置文字大小為11px;可以使用該方法，直接把文字大小設置為11.8就可以達到目的了。這樣還可以省下一個(gè)CSSHACK.(2)PX、EM和REM的使用對網(wǎng)頁(yè)版面的影響。PX是絕對單位，而EM是相對單位，在設置字體大小的時(shí)候，最好使用EM;當用IE調整網(wǎng)頁(yè)自由縮放的時(shí)候，PX不會(huì )做出任何的反應，而EM則可以隨著(zhù)頁(yè)面的縮放而縮放，默認的1em=16px;而EM是相對值，會(huì )繼承其父級元素的字體大小，如果全局變量中設置了“body{font-size:12px;}”;則1em=12px;而REM是一個(gè)CSS3新增的一個(gè)相對單位，REM就是根EM,REM是相對于HTML的根元素，只要調整根元素的大小就可以調整一個(gè)頁(yè)面的字體大小，并且該屬性IE8以上的版本都可識別，包括其他瀏覽器都能支持，如果不能支持，則可以使用P{font-size:12px;font-size:2rem;}.
3.3DOCTYPE(文檔類(lèi)型)影響CSS解析
IE依靠DOCTYPE判斷一個(gè)網(wǎng)頁(yè)該按什么標準渲染，渲染的意思是瀏覽器對網(wǎng)頁(yè)進(jìn)行排版，文檔類(lèi)型聲明引用DTD(文檔類(lèi)型定義)，文檔類(lèi)型聲明會(huì )告訴瀏覽器該采取什么標準讀取該網(wǎng)頁(yè)。
HTML有多個(gè)版本，HTML、HTML+、HTML2.0、HTML3.2、HTML4.01、HTML1.0、HTML5、XHTML5,在每個(gè)版本中，文檔聲明都存在不一致，總結如下：(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格式編寫(xiě)標記。(5)XHTML1.0Transitional---與HTML4.01Transitional-一致，但必須以正確的XML格式編寫(xiě)標記。(6)XHTML1.0Framesets--與HTML4.0Transi-tional一致，但可使用框架集。文檔類(lèi)型不正確就會(huì )導致無(wú)法正確讀取相應的HTML和CSS,導致網(wǎng)頁(yè)出現兼容性問(wèn)題。
3.4浮動(dòng)元素對容器的影響
(1)設置Height導致的問(wèn)題。Firefox設置height就不會(huì )使內容被撐大，但是IE設置height會(huì )導致內容撐大，導致height失效，所以最好不要設置height.(2)內容橫向上撐破容器問(wèn)題。如果含float屬性的容器未定義寬度，內容會(huì )橫向撐開(kāi)容器寬度，IE會(huì )把內容拆行，所以?xún)热萑菀讚纹聘?dòng)容器的需要定義寬度。
4結語(yǔ)
本文具體分析了瀏覽器不同內核不同版本對網(wǎng)頁(yè)解析不同而存在的兼容性問(wèn)題，包括網(wǎng)頁(yè)設計人員代碼編寫(xiě)不規范，版面設計中像素的使用問(wèn)題，文檔類(lèi)型影響瀏覽器對CSS解析，浮動(dòng)元素對版面布局的影響等，對網(wǎng)頁(yè)設計具有一定的參考意義，也為網(wǎng)站開(kāi)發(fā)人員尋找更好的方法解決兼容性問(wèn)題提供幫助。(圖略)
參考文獻
[1]李燁.別具光芒CSS屬性.瀏覽器兼容與網(wǎng)頁(yè)布局[M].人民郵電出版社，2008.
[2]劉增杰，史艷艷，劉玉萍.精通HTML+CSS網(wǎng)頁(yè)布局與樣式[M].清華大學(xué)出版社，2013.
[3]高洪濤.HTML+CSS網(wǎng)站開(kāi)發(fā)兵書(shū)[M].電子工業(yè)出版社，2013.
[4](美)達科特(DUCKETT,J).HTML&CSS設計與構建網(wǎng)站[M].清華大學(xué)出版社，2013.
【網(wǎng)頁(yè)設計中瀏覽器兼容性成因及具體問(wèn)題分析】相關(guān)文章：
通信設備電磁兼容性設計分析論文07-14
現代產(chǎn)品設計復雜性的成因分析10-27
建筑結構中主要裂縫成因分析與治理探討08-17
項目教學(xué)法在中職電子商務(wù)網(wǎng)頁(yè)設計教學(xué)中的應用分析論文07-17
藝術(shù)設計元素在網(wǎng)頁(yè)設計中的運用研究論文10-11
軟件分銷(xiāo)的渠道沖突成因分析10-10
asp技術(shù)在交互式網(wǎng)頁(yè)設計中的運用09-26
傳統紋樣在現代設計中的運用分析09-03