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