對(duì)幾款瀏覽器兼容性的測(cè)試分析

摘要：瀏覽器（Browser）是Web系統(tǒng)中的核心構(gòu)件，當(dāng)前的主流瀏覽器包括IE、Firefox、Chrome、Safari等。這些常用瀏覽器對(duì)一般網(wǎng)頁(yè)的兼容性各有不同，甚至同一種瀏覽器的不同版本對(duì)網(wǎng)頁(yè)的兼容也不一樣。因此對(duì)主流瀏覽器的兼容性進(jìn)行測(cè)試并分析出不兼容的主要原因，從而進(jìn)一步提出相應(yīng)的解決方法是網(wǎng)頁(yè)設(shè)計(jì)人員面臨的一項(xiàng)重要課題。

關(guān)鍵詞：網(wǎng)頁(yè)；兼容；瀏覽器；測(cè)試

中圖分類號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9599 （2012） 18-0000-02

1 引言

瀏覽器是Web服務(wù)的客戶端軟件，它可以向Web服務(wù)器發(fā)送各種請(qǐng)求，如HTTP、FTP等，并對(duì)從服務(wù)器發(fā)來(lái)的超文本信息和各種媒體數(shù)據(jù)格式進(jìn)行解釋、顯示和播放。在當(dāng)前互聯(lián)網(wǎng)廣泛滲入到人們工作、生活、娛樂(lè)等方方面面的今天，瀏覽器已成為人們上網(wǎng)時(shí)最常用的客戶端程序。

瀏覽器主要是借助HTTP協(xié)議與網(wǎng)站服務(wù)器的交互作用，而獲取到網(wǎng)頁(yè)，這些網(wǎng)頁(yè)在http協(xié)議下是由URL來(lái)指定的，這些網(wǎng)頁(yè)的文件格式一般表示為HTML，并由MIME在HTTP協(xié)議中指明。我們知道，一個(gè)網(wǎng)頁(yè)中可以包括多個(gè)格式的文件或文檔，且每個(gè)文件文檔都是從服務(wù)器來(lái)分別獲得的?，F(xiàn)在，大多數(shù)網(wǎng)站瀏覽器是能支持各種圖像格式和文本格式的，例如除了支持HTML格式之外，還支持JPEG、PNG、GIF等圖像格式，并且能夠擴(kuò)展支持眾多的網(wǎng)頁(yè)插件（plug-ins），有的瀏覽器還支持URL類型的格式，以及相關(guān)聯(lián)的協(xié)議，例如HTTPS（HTTP協(xié)議的加密版本）、FTP、Gopher等。在個(gè)人電腦上常用的網(wǎng)頁(yè)瀏覽器，現(xiàn)在是越來(lái)越多樣了，例如Mozilla的Firefox、微軟的Internet Explorer、Apple的Safari等，還有Opera、Google Chrome、GreenBrowser瀏覽器、360安全瀏覽器、搜狗瀏覽器、騰訊TT、傲游瀏覽器、百度瀏覽器等。糟糕的是，一些瀏覽器對(duì)一些網(wǎng)站無(wú)法兼容，人們?cè)谑褂靡恍g覽器訪問(wèn)網(wǎng)頁(yè)時(shí)，發(fā)現(xiàn)一些瀏覽器對(duì)一些網(wǎng)站網(wǎng)頁(yè)并不能很好地兼容，即不能打開(kāi)或不能全部打開(kāi)某些網(wǎng)頁(yè)。例如，用IE以外的一些瀏覽器瀏覽網(wǎng)站網(wǎng)頁(yè)，就有可能出現(xiàn)排版亂碼、內(nèi)容不完全顯示、一些功能無(wú)法使用等。要解決這些問(wèn)題，需要對(duì)瀏覽器進(jìn)行測(cè)試，看看這些瀏覽器能否兼容這些網(wǎng)頁(yè)，然后分析網(wǎng)頁(yè)存在的問(wèn)題，以便有針對(duì)性地改進(jìn)，讓所有瀏覽器都能完全地瀏覽各種網(wǎng)頁(yè)。

2 對(duì)Firefox、Chrome、Safari瀏覽器兼容性的測(cè)試

通過(guò)網(wǎng)頁(yè)，測(cè)試Firefox、Chrome、Safari三款瀏覽器的兼容性，測(cè)試的頁(yè)面主要是一些網(wǎng)站的首頁(yè)、欄目頁(yè)和基本的內(nèi)容頁(yè)面等，主要測(cè)試其排版、布局和各功能的使用狀況。

2.1 瀏覽器兼容性測(cè)試所用的方法。主要采用對(duì)比的方法，我們分別用Firefox 3.6.8版本、Chrome 6.0版本和Safari 5.0.1版本的瀏覽器，通過(guò)網(wǎng)絡(luò)，具體訪問(wèn)網(wǎng)易、騰訊網(wǎng)、新華網(wǎng)等網(wǎng)站，把訪問(wèn)所得的頁(yè)面，與用IE 7瀏覽器訪問(wèn)所得的頁(yè)面進(jìn)行比較，如果發(fā)現(xiàn)頁(yè)面有差異，則說(shuō)明該這瀏覽器無(wú)法兼容或不完全兼容這些頁(yè)面。由于新華網(wǎng)等幾大門戶網(wǎng)站內(nèi)容豐富，頁(yè)面繁多，我們不可能對(duì)所有的頁(yè)面進(jìn)行全部的比較，因此只能對(duì)其首頁(yè)、二級(jí)頁(yè)面和一些三級(jí)頁(yè)面進(jìn)行測(cè)試，采取隨機(jī)打開(kāi)的辦法抽測(cè)。

2.2 網(wǎng)頁(yè)兼容瀏覽器測(cè)試的具體要求。通過(guò)百度引擎，直接找到新華網(wǎng)、騰訊網(wǎng)、人民網(wǎng)、新浪網(wǎng)等。測(cè)試發(fā)現(xiàn)，一些網(wǎng)頁(yè)能對(duì)所有的瀏覽器都兼容，但一些頁(yè)面無(wú)法完全兼容。我們特別紀(jì)錄了一般不兼容、嚴(yán)重不兼容兩種狀況。我們給出的界定是：

一般不兼容是指在測(cè)試瀏覽器中所顯示的頁(yè)面與在IE中顯示的頁(yè)面，有部分排版、閱讀效果、信息獲取等方面，有所不一樣，或影響閱讀，或不展示信息，或出現(xiàn)錯(cuò)誤的展示，如表格位置不同，表格顯示不一樣等。

嚴(yán)重不兼容是指在測(cè)試瀏覽器與IE顯示的頁(yè)面差異更嚴(yán)重，頁(yè)面排版不同，信息顯示不同，信息獲取發(fā)生差異，嚴(yán)重影響或誤導(dǎo)客戶。如年月日顯示錯(cuò)誤等。

2.3 瀏覽器兼容性的測(cè)試結(jié)果。獲得不同的結(jié)果，除了一般的兼容之外，也有不兼容的狀況。我們分為一般不兼容和嚴(yán)重不兼容兩種。

2.3.1 一般不兼容。一般不兼容的表現(xiàn)主要是：網(wǎng)頁(yè)的版面中出現(xiàn)多余空白、表格以外出現(xiàn)頁(yè)面文字、網(wǎng)頁(yè)統(tǒng)計(jì)數(shù)字顯示不完整、文字和輸入框有移位、網(wǎng)頁(yè)的字體顏色被篡改、flash廣告不動(dòng)、網(wǎng)頁(yè)的表格邊框無(wú)中生有或由有變無(wú)、一些按鈕由并排變上下排列、網(wǎng)頁(yè)的文字顯示不完全、頁(yè)面的分割線由虛線變實(shí)線、滾動(dòng)圖片滾動(dòng)不同，滾動(dòng)文字的區(qū)域超出表格規(guī)定、頁(yè)面文字由居中變成居左或居右、鏈接文字在鼠標(biāo)停留其上時(shí)沒(méi)有變色、網(wǎng)頁(yè)的圖片大小發(fā)生異常、文字排版由一行變成兩行或三行、文字由居右側(cè)變成居左側(cè)、下拉框顯示不完全、字體變小等等。

這諸多的問(wèn)題，F(xiàn)irefox、Safari和Chrome三種瀏覽器都或多或少地出現(xiàn)，這一般性的不兼容，出現(xiàn)的問(wèn)題共有85次。

2.3.2 嚴(yán)重不兼容。嚴(yán)重不兼容的表現(xiàn)有：有關(guān)年份顯示錯(cuò)誤、不顯示時(shí)間、不顯示網(wǎng)頁(yè)動(dòng)畫(huà)、導(dǎo)航欄不正常顯示、頁(yè)面排版出現(xiàn)錯(cuò)誤性變化、原循環(huán)變化的圖片不顯示或不循環(huán)顯示、該懸浮的信息沒(méi)有懸浮或移動(dòng)、鼠標(biāo)點(diǎn)擊無(wú)反應(yīng)、滾動(dòng)內(nèi)容無(wú)法控制、頁(yè)面出現(xiàn)亂碼，需手動(dòng)切換編碼、網(wǎng)頁(yè)文字錯(cuò)位、圖片不顯示或發(fā)生重疊的現(xiàn)象、鼠標(biāo)移動(dòng)上去的提示信息錯(cuò)誤、不完全顯示列表、該滾動(dòng)的文字不滾動(dòng)、應(yīng)滾動(dòng)的信息不顯示、二級(jí)頁(yè)面導(dǎo)航欄無(wú)顯示、動(dòng)畫(huà)消失變成透明、不顯示統(tǒng)計(jì)數(shù)字等。

這些問(wèn)題，F(xiàn)irefox、Safari和Chrome三種瀏覽器也分別顯示出不同的次數(shù)。特別是網(wǎng)頁(yè)有關(guān)年份顯示錯(cuò)誤，三種瀏覽器出現(xiàn)最多，分別為9、10、10次。

3 測(cè)試結(jié)果原因分析

簡(jiǎn)單來(lái)說(shuō)，一些瀏覽器對(duì)網(wǎng)頁(yè)產(chǎn)生不兼容的主要原因包括下列幾項(xiàng)。

3.1 對(duì)CSS解釋不統(tǒng)一。現(xiàn)在的網(wǎng)頁(yè)制作一般采用用DIV+CSS（Cascading Style Sheets，層疊樣式表單）的布局方法，這些布局，IE都能顯示，但一些瀏覽器對(duì)網(wǎng)頁(yè)的CSS的解釋不統(tǒng)一，就造成無(wú)法顯示或顯示不全。

3.2 特效使用發(fā)生誤差。一些網(wǎng)頁(yè)使用有特效代碼，如用了JavaScript語(yǔ)法，但JavaScript沒(méi)有嚴(yán)格遵守ECMAScript規(guī)范的一些屬性和方法，因此，F(xiàn)irefox、Safari、Chrome這幾款瀏覽器對(duì)其不嚴(yán)格所為不予支持，于是就導(dǎo)致一些特效無(wú)法顯示。

3.3 函數(shù)解釋不同。網(wǎng)頁(yè)中的一些函數(shù)，在不同的瀏覽器中，解釋不一樣，這又造成了顯示的信息發(fā)生錯(cuò)誤，不同于IE的顯示。

4 網(wǎng)頁(yè)不兼容多瀏覽器問(wèn)題的解決

現(xiàn)在，人們使用的瀏覽器樣式越來(lái)越多，網(wǎng)站設(shè)計(jì)時(shí)必須兼顧絕大部分主流瀏覽器的顯示。

4.1 網(wǎng)頁(yè)制作要符合萬(wàn)維網(wǎng)聯(lián)盟的要求。即符合W3C（World Wide Web Consortium）標(biāo)準(zhǔn)，W3C是網(wǎng)頁(yè)技術(shù)的權(quán)威中立機(jī)構(gòu)，它制定的標(biāo)準(zhǔn)比較符合實(shí)際。一般瀏覽器都遵循這一機(jī)構(gòu)制定的標(biāo)準(zhǔn)。因此，網(wǎng)頁(yè)制作也必須遵循這一標(biāo)準(zhǔn)。一般的，人們向http：//valida 2 tor. w3. org /提交文件或提交網(wǎng)站URL，在線驗(yàn)證網(wǎng)頁(yè)是否符合W3C。

4.2 網(wǎng)頁(yè)制作采用CSS hack。由于不同的瀏覽器對(duì)CSS的解析方式不一樣，這就使得生成的網(wǎng)頁(yè)，其效果不一樣。要從根本上解決這一問(wèn)題，需要針對(duì)不同的瀏覽器來(lái)編寫(xiě)CSS，這樣才能使CSS同時(shí)兼容不同的瀏覽器。這樣網(wǎng)頁(yè)才能在不同的瀏覽器中，顯示出相同的效果，使用CSS hack可以解決這些問(wèn)題。當(dāng)然，濫用CSS hack，又會(huì)導(dǎo)致瀏覽器出現(xiàn)更多的兼容性問(wèn)題。

4.3 先行測(cè)試網(wǎng)頁(yè)。在網(wǎng)頁(yè)發(fā)布之前，通過(guò)一些網(wǎng)頁(yè)服務(wù)器建立臨時(shí)網(wǎng)站，然后嘗試使用不同的瀏覽器來(lái)瀏覽測(cè)試，這些服務(wù)器有如IIS、TOMCAT、RESIN等，借以發(fā)現(xiàn)其兼容性如何，看能否兼容多個(gè)瀏覽器。也可以用Dreamweaver、HTML Toolbox等軟件來(lái)測(cè)試。還可以通過(guò)在http：//browser 2shots.org/網(wǎng)頁(yè)上測(cè)試，這樣，可以發(fā)現(xiàn)其是否兼容，如果不兼容，則修訂有關(guān)的網(wǎng)頁(yè)代碼。

4.4 按照網(wǎng)頁(yè)制作要求具體解決問(wèn)題。對(duì)具體問(wèn)題的解決，需要依據(jù)具體情況具體分析，作出不同的處理。這些問(wèn)題關(guān)聯(lián)不同的規(guī)則要求。我們僅通過(guò)下面幾個(gè)例子示范說(shuō)明。

如“瀏覽器時(shí)間顯示各不相同”這個(gè)問(wèn)題在幾個(gè)瀏覽器中，都比較突出。如為顯示2012年6月22日，IE能正常顯示，但Firefox、Safari、Chrome則顯示年份位為112年，主要是因?yàn)榫W(wǎng)頁(yè)在顯示年份時(shí)，一些網(wǎng)頁(yè)采用了JavaScript中的以下方法：

var today = new Date（ ） ；

var year = today. getYear（ ） ；

在IE中，用上面的方法變量year的值，可以使其變?yōu)?012，而在上述三款瀏覽器下，today.getYear（ ）返回的是Date對(duì)象中的年份與1900年之間的差距，即112，因此網(wǎng)頁(yè)顯示就變成了112年。為此只能更換使用getFullYear（ ）函數(shù)，即：

var today = new Date（ ） ；

var year = today. getFullYear（ ） ；

又如，網(wǎng)站網(wǎng)頁(yè)對(duì)初始函數(shù)的調(diào)用，有些對(duì)網(wǎng)頁(yè)初始函數(shù)調(diào)用，采取了document.body.onload=init；方法，但是，這方法不能在IE以外的瀏覽器中運(yùn)行，因此，在Firefox、Safari、Chrome瀏覽器中應(yīng)該使用document.body.onload= init（ ）。

再如亂碼問(wèn)題。有的網(wǎng)頁(yè)需要在Safari瀏覽器中，通過(guò)手動(dòng)設(shè)置編碼為簡(jiǎn)體中文GB2321，然后才能正常顯示。通過(guò)查看源代碼，可以發(fā)現(xiàn)這類頁(yè)面中沒(méi)有對(duì)編碼進(jìn)行設(shè)定?？稍诰W(wǎng)頁(yè)中增加< meta http - equiv = / Content- Type 0 content = / text/ html； charset = gb2312 0 / >語(yǔ)句對(duì)網(wǎng)頁(yè)的編碼進(jìn)行設(shè)定。

隨著網(wǎng)絡(luò)技術(shù)的成熟和瀏覽器多元化時(shí)代的到來(lái)，瀏覽器兼容性問(wèn)題更趨突出，如何使設(shè)計(jì)出兼容不同瀏覽器的網(wǎng)頁(yè)，是網(wǎng)頁(yè)設(shè)計(jì)人員普遍面臨的一個(gè)技術(shù)問(wèn)題。本文提出了瀏覽器兼容問(wèn)題的測(cè)試方法，并有針對(duì)性地提出了相應(yīng)的解決方案。

參考文獻(xiàn)：

[1]陳柳海.實(shí)用CSS 使用經(jīng)驗(yàn)總結(jié)[J].科技傳播，2010（6）.

[2]蔣回生.淺談網(wǎng)頁(yè)制作中瀏覽器差異性—樣式兼容問(wèn)題[J].電腦知識(shí)與技術(shù)，2010（9）.

[3]許元朋，于黎江.CSS 在瀏覽器中兼容問(wèn)題的一些解決辦法[J].學(xué)術(shù)論壇，2012（4）.

[作者簡(jiǎn)介]

董啟雄，裝備學(xué)院信息管理中心，高級(jí)工程師。唐清安，裝備學(xué)院信息管理中心，高級(jí)工程師。陳廣旭，裝備學(xué)院信息管理中心，講師。他們都主要從事計(jì)算機(jī)網(wǎng)絡(luò)管理與應(yīng)用、教育技術(shù)應(yīng)用與管理等領(lǐng)域的研究。