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

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

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

1 引言

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

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

2 對Firefox、Chrome、Safari瀏覽器兼容性的測試

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

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

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

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

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

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

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

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

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

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

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

簡單來說，一些瀏覽器對網(wǎng)頁產(chǎn)生不兼容的主要原因包括下列幾項(xiàng)。

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

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

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

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

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

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

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

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

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

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

var today = new Date（ ） ；

var year = today. getYear（ ） ；

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

var today = new Date（ ） ；

var year = today. getFullYear（ ） ；

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

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

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

參考文獻(xiàn)：

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

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

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

[作者簡介]

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