面向不同瀏覽器的B/S系統(tǒng)兼容性

魏劍新

摘要

充分考慮兼容性問(wèn)題是確保B/S系統(tǒng)的網(wǎng)頁(yè)樣式和腳本正常運(yùn)要行最重要的工作之一。通過(guò)深入分析不同瀏覽器內(nèi)核、版本及其存在的典型兼容性問(wèn)題產(chǎn)生的原因及表現(xiàn)形式，將網(wǎng)頁(yè)兼容性問(wèn)題劃分為樣式（CSS）兼容和腳本（JavaScript）兼容性問(wèn)題，通過(guò)測(cè)試用例給出了典型兼容性問(wèn)題的解決方法，并通過(guò)典型兼容性問(wèn)題的歸納分析，提出了具有一定普適性的解決思路。

【關(guān)鍵詞】瀏覽器內(nèi)核 瀏覽器 網(wǎng)頁(yè) 兼容性B/S

互聯(lián)網(wǎng)應(yīng)用中，網(wǎng)頁(yè)是人們與外界信息進(jìn)行交互的常用媒介，對(duì)于一個(gè)B/S系統(tǒng)的開(kāi)發(fā)設(shè)計(jì)者而言，網(wǎng)頁(yè)在不同客戶機(jī)上的顯示美觀度，將直接影響著信息傳播的有效性。而在網(wǎng)頁(yè)設(shè)計(jì)中，保證網(wǎng)頁(yè)在不同的瀏覽器中的兼容性卻始終是B/S系統(tǒng)開(kāi)發(fā)最重要的問(wèn)題之一。

由于目前瀏覽器的多樣化，瀏覽器開(kāi)發(fā)者對(duì)于網(wǎng)頁(yè)國(guó)際通用標(biāo)準(zhǔn)W3C（World Wide Web Consortium）的理解又有所不同，導(dǎo)致在不同的瀏覽器中同一網(wǎng)頁(yè)呈現(xiàn)出不同的外觀與互動(dòng)效果，甚至可能出現(xiàn)布局錯(cuò)位、腳本失效等情況，這些即是網(wǎng)頁(yè)兼容性問(wèn)題。

對(duì)于不同瀏覽器中網(wǎng)頁(yè)兼容性，國(guó)內(nèi)外已經(jīng)有所研究。蔣回生（2010）對(duì)網(wǎng)頁(yè)制作中瀏覽器差異性——樣式兼容問(wèn)題進(jìn)行了探討，曾欣（2014）對(duì)CSS在各個(gè)瀏覽器兼容性問(wèn)題及解決方案進(jìn)行了研究，Whitfield，N.（2012）提出使用HTML-Kit工具消除CSS在不同的瀏覽器中的兼容性問(wèn)題。但現(xiàn)有階段的相關(guān)研究仍比較有限，隨著瀏覽器版本的不斷更新，品種日益繁多，仍有很多問(wèn)題亟待解決。

為系統(tǒng)的解決B/S系統(tǒng)存在的瀏覽器兼容性問(wèn)題，下面從瀏覽器內(nèi)核、不同瀏覽器版本存在的典型兼容性問(wèn)題及其解決方案入手，對(duì)不同瀏覽器的網(wǎng)頁(yè)兼容性問(wèn)題展開(kāi)了較為系統(tǒng)的研究，提出了一組具有普適性的網(wǎng)頁(yè)兼容性解決方案。

1瀏覽器內(nèi)核及典型兼容性問(wèn)題

1.1四種常用瀏覽器內(nèi)核

瀏覽器中的核心部分是“Rendering Engine”，譯為“解釋引擎”，一般習(xí)慣將之稱(chēng)為“瀏覽器內(nèi)核”。瀏覽器內(nèi)核主要負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行語(yǔ)法解析和頁(yè)面渲染。因此，瀏覽器內(nèi)核也相當(dāng)于瀏覽器所使用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容以及頁(yè)面的格式信息。不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁(yè)編寫(xiě)語(yǔ)法的解釋也有不同，因此同一網(wǎng)頁(yè)在不同內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同，會(huì)產(chǎn)生很多兼容性問(wèn)題，這也是網(wǎng)頁(yè)編寫(xiě)者需要在不同內(nèi)核的瀏覽器中測(cè)試網(wǎng)頁(yè)顯示效果的原因。

瀏覽器內(nèi)核種類(lèi)繁多，各種免費(fèi)內(nèi)核大約有10種以上，其中常用的內(nèi)核有四種，即Trident、Gecko、Webkit和Blink，融合這四種內(nèi)核的有不同瀏覽器，如圖1所示。

Trident是正瀏覽器一直沿用的內(nèi)核，由于IE瀏覽器占有較大的市場(chǎng)份額，因此，該內(nèi)核比較流行，當(dāng)前相當(dāng)多網(wǎng)頁(yè)根據(jù)該內(nèi)核標(biāo)準(zhǔn)進(jìn)行編寫(xiě)，然而，Trident對(duì)真正的網(wǎng)頁(yè)標(biāo)準(zhǔn)支持不是很好，甚至在2005年出現(xiàn)了與W3C標(biāo)準(zhǔn)發(fā)生脫節(jié)的情況，這在早期的IE版本中比較明顯，比如IE5.5以前（包括IE5.5），直到IE8出現(xiàn)，對(duì)應(yīng)Trident版本4.0，其對(duì)W3C標(biāo)準(zhǔn)的支持才有較大提升。

Gecko是Firefox和Flock所采用內(nèi)核，功能強(qiáng)大、豐富和支持很多復(fù)雜網(wǎng)頁(yè)效果和瀏覽器擴(kuò)展接口是該內(nèi)核的優(yōu)點(diǎn)，其存在的顯而易見(jiàn)的代價(jià)是內(nèi)存等資源消耗較多。

Webkit是Safari采用的內(nèi)核，優(yōu)點(diǎn)就是網(wǎng)頁(yè)瀏覽速度較快，勝于Gecko和Trident，缺點(diǎn)是對(duì)于網(wǎng)頁(yè)代碼的容錯(cuò)性不好，即對(duì)網(wǎng)頁(yè)代碼的兼容性較低，會(huì)導(dǎo)致一些代碼編寫(xiě)不規(guī)范的網(wǎng)頁(yè)無(wú)法正確顯示。

Blink由Google在2013年發(fā)布，是從WebKit內(nèi)核衍生而來(lái)，是Google瀏覽器Chrome較新版本采用的內(nèi)核。Google對(duì)Blink進(jìn)行了大量?jī)?yōu)化，速度和兼容性均得到較大提升。

1.2典型的瀏覽器內(nèi)核兼容性問(wèn)題

1.2.1邊距差異

很多標(biāo)簽在不同瀏覽器下的邊距會(huì)出現(xiàn)差異，這個(gè)問(wèn)題的原因是各個(gè)瀏覽器的CSS盒模型有所不同，標(biāo)簽?zāi)J(rèn)的margin和padding有所差異。這個(gè)是以往最常見(jiàn)的也最易解決的瀏覽器兼容性問(wèn)題，現(xiàn)在很多CSS文件開(kāi)頭都會(huì)使用通配符*來(lái)初始化各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁，如在CSS中設(shè)置*{margin：0；padding：0；}。

1.2.2最小高度

設(shè)置較小高度標(biāo)簽min-height（—般小于10px），在IE6，IE7和其他部分瀏覽器中高度超出自己設(shè)置高度。這個(gè)問(wèn)題的產(chǎn)生是由于部分瀏覽器會(huì)給每個(gè)標(biāo)簽一個(gè)最小默認(rèn)的行高。即使標(biāo)簽內(nèi)容為空，其高度仍然會(huì)達(dá)到行高的默認(rèn)值。解決方案是給超出高度的標(biāo)簽設(shè)置overflow：hidden；或者設(shè)置行高line-height小于你設(shè)置的高度。

1.2.3Textarea標(biāo)簽

Textarea標(biāo)簽設(shè)置width和height后，在IE瀏覽器中的實(shí)際高度寬度與其他瀏覽器不一致。IE瀏覽器中，Textarea實(shí)際高度寬度=設(shè)置的width和height值；而在其他瀏覽器（如Chrome，火狐等）中，Textarea實(shí)際高度寬度=設(shè)置的width和height值-padding值-border值?？梢酝ㄟ^(guò)設(shè)置padding=0px；border=0px來(lái)解決這個(gè)問(wèn)題。

1.2.4innerText失效

用javascript動(dòng)態(tài)添加文本時(shí)，使用innerText在部分瀏覽器（如火狐瀏覽器）中失效?；鸷袩o(wú)法識(shí)別innerText，但能識(shí)別具有相似功能的標(biāo)簽innerHTML。因此，統(tǒng)一使用innerHTML可保證JS代碼在不同瀏覽器中的有效性。

1.2.5鼠標(biāo)事件

鼠標(biāo)事件中的event.x與event.y在部分瀏覽器（火狐，Chrome）下失效。：IE下，even對(duì)象有x，y屬性，但是沒(méi)有pageX，pageY屬性；Firefox和Chrome下，even對(duì)象有pageX，pageY屬性，但是沒(méi)有x，y屬性。解決方法是使用mX（mX=event.x？event.x：event.pageX；）來(lái)代替IE下的event.x或者Firefox下的event.pageX。endprint

2瀏覽器版本及典型兼容性問(wèn)題

2.1主要瀏覽器版本

根據(jù)瀏覽器的版本再細(xì)分，正瀏覽器從1995年發(fā)布IE1開(kāi)始到最新的IE12，己經(jīng)有12個(gè)版本之多。其中，當(dāng)前用戶使用較多的是IE6?10，IE7解決了IE6的一個(gè)float bug，增強(qiáng)了CSS選擇器支持；IE8完全支持CSS2.1和選擇器，DOM操作更符合W3C標(biāo)準(zhǔn)，但DOM支持仍不完整；IE9完全支持DOML1，DOML2，Jscript更符合標(biāo)準(zhǔn)，支持ECMAScript5，HTML5，CSS3，SVG；IE10在IE9的基礎(chǔ)上，改進(jìn)了Chakra引擎，使得網(wǎng)頁(yè)加載速度較IE9更快。HTML5支持上較IE9更多更全面。而其他瀏覽器，諸如火狐，chrome，Safari等也都經(jīng)歷了很多個(gè)版本更新。本質(zhì)上，每一次瀏覽器版本的更新，都可能伴隨著內(nèi)核版本上的更新，從而產(chǎn)生對(duì)網(wǎng)頁(yè)源碼解析上的差異，對(duì)HTML中的一些標(biāo)簽的處理方式也可能產(chǎn)生影響。

2.2典型的瀏覽器版本兼容性問(wèn)題

2.2.1默認(rèn)margin不同

如Body標(biāo)簽在IE8、9、10中默認(rèn)margin為8px；而IE6、7中默認(rèn)margin為15px10px15pxl0px。不僅在不同瀏覽器中標(biāo)簽?zāi)J(rèn)邊距不同，不同的IE版本中也有所不同，一樣可以在CSS中設(shè)置*{margin：0；padding：0；}來(lái)解決這個(gè)問(wèn)題。

2.2.2Button默認(rèn)type類(lèi)型

Button標(biāo)簽的默認(rèn)type類(lèi)型差異，舊版IE默認(rèn)為button類(lèi)型，從IE8開(kāi)始，為了靠攏W3C標(biāo)準(zhǔn)，button的type屬性默認(rèn)值改為submit了，所以一般在使用button標(biāo)簽時(shí)，要盡量設(shè)置type類(lèi)型，以適應(yīng)不同IE版本。若不標(biāo)明type類(lèi)型，可能會(huì)影響表單提交。

2.2.3CSS3支持度

IE6-8不支持、或者不完全支持CSS3的屬性，比如CSS中通過(guò)border-radius設(shè)置的圓角div在IE6-8中都是無(wú)法顯示出圓角效果的。如果非要顯示圓角效果，有一種思路是利用VML模擬。VML是The Vector Markup Language（矢量可標(biāo)記語(yǔ)言），是微軟自己開(kāi)發(fā)的語(yǔ)言，相當(dāng)于IE里面的畫(huà)筆，能實(shí)現(xiàn)你所想要的圖形，而且結(jié)合腳本，可以讓圖形產(chǎn)生動(dòng)態(tài)的效果。因此，IE下可用VML做出圓角、半透明、陰影等效果，并兼容不同正版本。

2.2.4使用JS關(guān)閉窗口

IE7及以上版本通過(guò)JS無(wú)法直接關(guān)閉窗口，會(huì)出現(xiàn)一個(gè)“您所訪問(wèn)的窗口正試圖關(guān)閉”的確認(rèn)對(duì)話框。這需要在關(guān)閉窗口的代碼window.opener=null；window.close（）；中加入window.open（""，" self"）。這個(gè)方法是當(dāng)前頁(yè)面的opener賦為空字符串（空字串可不是null，并不是為空），然后關(guān)閉當(dāng)前頁(yè)，做個(gè)按鈕來(lái)觸發(fā)這個(gè)方法。

2.2.5HTML5兼容性

IE8及以下正版本對(duì)較新的HTML5標(biāo)簽的支持是很有限的，導(dǎo)致一些標(biāo)簽無(wú)法顯示或錯(cuò)位?？梢栽贖TML頭部添加以下JavaScript代碼實(shí)現(xiàn)導(dǎo)入html5shiv包，

<！-[ifIE]>

〈scriptsrc=”http：//html5shiv.googlecode.com/svn/trunk/html5_JS”>

<！[endif]->

上面代碼僅會(huì)在IE瀏覽器下運(yùn)行，還有一點(diǎn)需要注意，在頁(yè)面中調(diào)用html5.JS文件必須添加在頁(yè)面的head元素內(nèi)，因?yàn)镮E瀏覽器必須在元素解析前知道這個(gè)元素，所以這個(gè)JS文件不能在頁(yè)面底部調(diào)用。

3用例測(cè)試

登錄

圖3：點(diǎn)擊之后按鈕樣式由左圖變?yōu)橛覉D

針對(duì)瀏覽器的不同內(nèi)核，本測(cè)試采用了4個(gè)具有代表性的瀏覽器，分別是IElO（Trident）、火狐瀏覽器（Gecko）、搜狗瀏覽器（高速模式：Webkit）、Chrome瀏覽器（Blink）；針對(duì)瀏覽器的不同版本，又加入了IE6、正7、IE8、IE9四個(gè)版本的瀏覽器，測(cè)試用例使用項(xiàng)目組開(kāi)發(fā)的如圖2所示的Java在線測(cè)試系統(tǒng)http：//www.java.zjut.edu.cn，以下為典型問(wèn)題及其解決方案。

3.1登錄按鈕樣式不一致

登錄按鈕的CSS樣式代碼如下：

.btn-login{

BACKGROUND-POSITION：Opx

-208px；

COLOR：#fff；

box-shadow：02px5pxrgba（0，28，88，.3）

}

.btn-login：focus{

BACKGROUND-POSITION：Opx

-304px；

COLOR：#b5dlee

}

此代碼效果是當(dāng)用戶點(diǎn)擊css樣式為.btn-login的“登錄”按鈕后，按鈕背景貼圖改變，字體顏色由原來(lái)的白色變?yōu)榛疑?。在IE8-10、Chrome、搜狗、火狐下CSS效果如圖3所示。

然而在IE6-7中，點(diǎn)擊“登錄”按鈕之后按鈕背景貼圖和字體顏色未變，仍為圖3左邊按鈕樣式。

CSS2.1規(guī)范中描述的‘：focus偽類(lèi)，在CSS1歷史規(guī)范中均無(wú)規(guī)定，這導(dǎo)致早期版本的瀏覽器，如：IE6IE7IE8（Q）不支持：focus偽類(lèi)。如果在元素上使用了：focus偽類(lèi)，會(huì)使預(yù)期的得到焦點(diǎn)時(shí)觸發(fā)效果在IE6 IE7 IE8（Q）中無(wú)效。目前較好的解決方案是使用JavaScript綁定onfocus onblur事件模仿‘：focus效果。endprint

3.2彈出新窗口相關(guān)代碼：

此代碼在IE、火狐、Chrome下實(shí)現(xiàn)了預(yù)期的效果，點(diǎn)擊注冊(cè)按鈕之后，可彈出如圖4所示的注冊(cè)小窗口。

但在搜狗發(fā)現(xiàn)無(wú)法彈出新的窗口，而是產(chǎn)生了一個(gè)新的網(wǎng)頁(yè)選項(xiàng)卡，如圖5所示，其中window.open方法中width、height、top、left這幾個(gè)參數(shù)完全失效了。注意到搜狗有“彈出窗口攔截”功能，但是不啟用該功能，window.open仍無(wú)法彈出新窗口。

搜狗Webkit內(nèi)核下，會(huì)無(wú)視該彈窗是否為響應(yīng)用戶鼠標(biāo)操作的回調(diào)（a和input button以及button等點(diǎn)擊類(lèi)交互標(biāo)簽是不被攔截的），而一律強(qiáng)制攔截彈窗。比較折中的解決方案是在JS中判斷瀏覽器類(lèi)型，在搜狗瀏覽器中不使用彈出窗口，而采用特定的CSS布局，讓注冊(cè)板塊居中，而不是如圖5中居左影響視覺(jué)效果。

3.3輸入框背景色

網(wǎng)站注冊(cè)頁(yè)面中的6個(gè)輸入框，正常樣式如圖6所示。

然而，輸入框背景色在Chrome瀏覽器中由默認(rèn)的白色變?yōu)辄S色，顯得與背景灰白色圖片不協(xié)調(diào)。

測(cè)試中發(fā)現(xiàn)，在第一次輸入時(shí)不會(huì)出現(xiàn)黃色背景，之后則每次均出現(xiàn)，而且在出現(xiàn)黃色背景的同時(shí)，Chrome瀏覽器會(huì)根據(jù)歷史記錄自動(dòng)完成表單。經(jīng)查資料，這黃色背景其實(shí)就是自動(dòng)表單的標(biāo)記。

chrome表單自動(dòng)填充后，input文本框的背景會(huì)變成偏黃色的，這是由于chrome會(huì)默認(rèn)給自動(dòng)填充的input表單加上input：-webkit-autofill私有屬性，然后對(duì)其賦予以下樣式：input：-webkit-autofill{

background-color：#FAFFBD；

background-image：none；

color：#000；

}

在某些情況下，該黃色背景會(huì)影響到預(yù)期效果，尤其是在給input文本框使用圖片背景時(shí)，原有的圓角和邊框會(huì)被覆蓋。

有兩種去掉黃色背景的方案，其一是修改webkit-autofill標(biāo)簽，改變其顏色、邊框等屬性；其二是在form標(biāo)簽上直接關(guān)閉表單的自動(dòng)填充功能，使用html5新標(biāo)簽：autocomplete=”off”。

3.4滾動(dòng)條樣式

Java在線測(cè)試網(wǎng)站的考試頁(yè)面中，通過(guò)編寫(xiě)CSS將滾動(dòng)條顏色改為白色，使其無(wú)法看出，但是在搜狗和火狐瀏覽器中發(fā)現(xiàn)原有的CSS配色方案失效了，如圖7所示。

這表明在正下可行的CSS中SCROLLBAR標(biāo)簽在搜狗和火狐瀏覽器中無(wú)法生效。究其原因，在Webkit內(nèi)核下，網(wǎng)頁(yè)將不調(diào)用IE瀏覽器的滾動(dòng)欄，而是使用Webkit自帶的滾動(dòng)欄。因此，在webkit內(nèi)核中，需要重新配置-webkit-scrollbar標(biāo)簽的屬性，將其設(shè)置為透明或者白色（網(wǎng)頁(yè)背景色）均可。然而火狐Gecko內(nèi)核下，無(wú)法對(duì)其自帶的滾動(dòng)條樣式進(jìn)行重新配色。不過(guò)，可以下載一些樣式美觀的滾動(dòng)條插件來(lái)取代原生滾動(dòng)條，然后再對(duì)滾動(dòng)條插件根據(jù)網(wǎng)站需求進(jìn)行重新配色。

3.5禁止網(wǎng)頁(yè)后退

在Java在線測(cè)試系統(tǒng)網(wǎng)站的測(cè)試模塊中，需實(shí)現(xiàn)防止在用戶交卷后返回做題頁(yè)面重新做題。IE下通過(guò)如下javascript腳本：

window.history.forward（1）；

可有效防止交卷后按“后退”按鈕重復(fù)做題以達(dá)到刷分目的。

在其他瀏覽器的測(cè)試中發(fā)現(xiàn)，該腳本在chrome中仍有效，但在搜狗和火狐中則失效。搜狗內(nèi)核不能返回到做題頁(yè)面，但是成績(jī)頁(yè)面中每按一次“后退”都會(huì)刷新題目和正確答案，同時(shí)成績(jī)反復(fù)記錄?；鸷鼊t可直接返回到做題頁(yè)面修改答案，然后重新交卷，不過(guò)成績(jī)不會(huì)因答案的修改而改變，成績(jī)反復(fù)記錄。測(cè)試結(jié)果如表1所示。

上述情況，主要是由于搜狗的webkit內(nèi)核和Firefox的Gecko內(nèi)核對(duì)于JS腳本window.history.forward的支持度不夠。在搜狗中，在成績(jī)頁(yè)面中“后退”到做題頁(yè)面時(shí)，會(huì)重新向服務(wù)器發(fā)送獲取新試題的POST請(qǐng)求，所以雖然從做題頁(yè)面前進(jìn)到成績(jī)頁(yè)面，但是試題己經(jīng)改變，并且重新提交了一次成績(jī)記錄。在Firefox中，window.history.forward則完全失效。

基于上述分析，利用客戶端腳本將難以解決關(guān)于禁止“后退”的兼容性問(wèn)題，為避免網(wǎng)站前端兼容性差異，最終通過(guò)服務(wù)器驗(yàn)證來(lái)解決該問(wèn)題。

4測(cè)試結(jié)果分析

基于上述測(cè)試結(jié)果，瀏覽器兼容性差異可劃分為CSS差異性和javascript差異性?xún)纱箢?lèi)。不同內(nèi)核的瀏覽器之間差異性相對(duì)較大，javascript差異性更為明顯。其主要原因是幾種內(nèi)核對(duì)javascript中一些函數(shù)的支持度不同。相對(duì)而言，同一內(nèi)核瀏覽器不同版本之間的差異性較小，主要是CSS差異，由于各版本發(fā)布時(shí)間的先后，其對(duì)應(yīng)支持的CSS版本也不同，導(dǎo)致了較早期的版本對(duì)新CSS標(biāo)簽無(wú)法識(shí)別。

5兼容性問(wèn)題的普適性解決方案

總結(jié)上述案例，在消除瀏覽器兼容性差異的方法上，一般可以采用下列幾種思路：

（1）給不同瀏覽器綁定不同CSS和JS。具體而言，可以使用JS中的navigator對(duì)象來(lái)獲取當(dāng)前瀏覽器類(lèi)型和版本；Html中使用例如<！--[iflteIE6]>的hack標(biāo)簽也可對(duì)瀏覽器版本進(jìn)行判斷。

（2）使用javascript腳本實(shí)現(xiàn)樣式變化。使用JS實(shí)現(xiàn)CSS樣式變化，從而消除對(duì)CSS標(biāo)簽支持度不同的兼容性問(wèn)題，如6.1登錄按鈕樣式不一致的bug。

（3）取消一些瀏覽器的特殊效果。屏蔽某些瀏覽器的特殊效果，以到達(dá)各瀏覽器一致性。一些特殊效果對(duì)樣式布局產(chǎn)生了負(fù)面影響，而實(shí)用價(jià)值又不是很高，可以考慮剔除。如6.3輸入框背景顏色問(wèn)題。endprint

（4）針對(duì)特定的瀏覽器加特定的標(biāo)簽。在webkit內(nèi)核瀏覽器中，很多標(biāo)簽都是使用-webkit開(kāi)頭，如6.4中-webkit-scrollbar標(biāo)簽也可使用CSShack，就是針對(duì)不同的瀏覽器寫(xiě)不同的CSS語(yǔ)言，比如IE6能識(shí)別下劃線“ ”和星號(hào)“*”，IE7能識(shí)別星號(hào)“*”但不能識(shí)別下劃線“ ”，而firefox兩個(gè)都不能認(rèn)識(shí)。

（5）前臺(tái)功能由后臺(tái)程序?qū)崿F(xiàn)。前端JS腳本的某些功能可以通過(guò)后臺(tái)程序?qū)崿F(xiàn)，從而避免瀏覽器兼容性問(wèn)題，如禁止網(wǎng)頁(yè)后退問(wèn)題。

6結(jié)語(yǔ)

通過(guò)深入分析網(wǎng)頁(yè)兼容性問(wèn)題存在的原因，從瀏覽器內(nèi)核及其典型兼容性問(wèn)題、不同瀏覽器版本及其典型兼容性問(wèn)題等方面入手，對(duì)網(wǎng)頁(yè)兼容性問(wèn)題作了較為系統(tǒng)的研究，同時(shí)采用實(shí)例網(wǎng)站對(duì)不同內(nèi)核的瀏覽器以及同一瀏覽器不同版本之間進(jìn)行了兼容性測(cè)試，并對(duì)結(jié)果進(jìn)行分析，提出了一組具有普適性的網(wǎng)頁(yè)兼容性解決方案。

參考文獻(xiàn)

[1]李秀娟網(wǎng)頁(yè)在不同分辨率下的兼容性問(wèn)題淺析[J]計(jì)算機(jī)光盤(pán)軟件與應(yīng)用，2013（01）：202，247.

[2] Arah T. Browser Wars III[J]. PC Pro，2013，227：87-9.

[3] Schmadeka WL. Beginning CSS： Cascading s ty-le sheets for web design[J]. TECHNICAL COMMUNICATION，2008，55：201-201.

[4] BIans i t B D. An introduction to cascading style sheets （CSS） [J]. Journal of Electro-nic Resources in Medical Libraries，2008（05）：395-409.

[5] Herczeg Z，Loki G，Szirbucz T，Kiss A.Va1-idat ing JavaScript guidelines across mult-iple web browsers[J]. Nordic Journal of C-omput ing，2013（15）：18-31.

[6] Richards G，Hammer C，Nardelli FZ，Jaganna-than S，Vitek J.Flexible Access Control f-or JavaScript. ACMSIGPLAN NOTICES，2013（48）：305-322.

[7]劉增杰，臧順娟，何楚斌.網(wǎng)頁(yè)布局模式淺析[J].計(jì)算機(jī)光盤(pán)軟件與應(yīng)用，2014（01）：184-185.

[8]曾欣.淺淡CSS在各個(gè)瀏覽器兼容性問(wèn)題及解決方案[J].赤子，2014（03）：232.

[9] Whitfield N. Frames and coding [Web page des ign] [J]. Personal Computer World， 2007， 30 （08）：140-1.

[10] Wilhite Steve E. Web browsers[J]. Hawaii Dental Association，2011： 21.

[11] Zheng H， Huang H， Zhu LM.2012 FOURTH INT-ERNATIONAL CONFERENCE ON MULTIMEDIA INFOR-MATION NETWORKING AND SECURITY： MINES 2012： A Web Design Mode for browsers to CSS com-patibility issues， Nanjing Univ Sci & Tec-hnol，NOV 02-04， 2012 [C].NEW YORK： IEEE，2012.

[12] Hogarth G.CSS hacks and filters： Making cascading style sheets work [J/ OL]. TECHNI-CAL COMMUNICATION， 2006 （54）：478-479.

[13] Wilson T.HTML5 hacks[M]. ENGLAND： UNIV S-HEFFIELD DEPT INFORMATION STUDIES，2013.endprint