面向不同瀏覽器的B/S系統兼容性

魏劍新

摘要

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

【關鍵詞】瀏覽器內核 瀏覽器 網頁 兼容性B/S

互聯網應用中，網頁是人們與外界信息進行交互的常用媒介，對于一個B/S系統的開發設計者而言，網頁在不同客戶機上的顯示美觀度，將直接影響著信息傳播的有效性。而在網頁設計中，保證網頁在不同的瀏覽器中的兼容性卻始終是B/S系統開發最重要的問題之一。

由于目前瀏覽器的多樣化，瀏覽器開發者對于網頁國際通用標準W3C（World Wide Web Consortium）的理解又有所不同，導致在不同的瀏覽器中同一網頁呈現出不同的外觀與互動效果，甚至可能出現布局錯位、腳本失效等情況，這些即是網頁兼容性問題。

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

為系統的解決B/S系統存在的瀏覽器兼容性問題，下面從瀏覽器內核、不同瀏覽器版本存在的典型兼容性問題及其解決方案入手，對不同瀏覽器的網頁兼容性問題展開了較為系統的研究，提出了一組具有普適性的網頁兼容性解決方案。

1瀏覽器內核及典型兼容性問題

1.1四種常用瀏覽器內核

瀏覽器中的核心部分是“Rendering Engine”，譯為“解釋引擎”，一般習慣將之稱為“瀏覽器內核”。瀏覽器內核主要負責對網頁進行語法解析和頁面渲染。因此，瀏覽器內核也相當于瀏覽器所使用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。不同的瀏覽器內核對網頁編寫語法的解釋也有不同，因此同一網頁在不同內核的瀏覽器里的渲染（顯示）效果也可能不同，會產生很多兼容性問題，這也是網頁編寫者需要在不同內核的瀏覽器中測試網頁顯示效果的原因。

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

Trident是正瀏覽器一直沿用的內核，由于IE瀏覽器占有較大的市場份額，因此，該內核比較流行，當前相當多網頁根據該內核標準進行編寫，然而，Trident對真正的網頁標準支持不是很好，甚至在2005年出現了與W3C標準發生脫節的情況，這在早期的IE版本中比較明顯，比如IE5.5以前（包括IE5.5），直到IE8出現，對應Trident版本4.0，其對W3C標準的支持才有較大提升。

Gecko是Firefox和Flock所采用內核，功能強大、豐富和支持很多復雜網頁效果和瀏覽器擴展接口是該內核的優點，其存在的顯而易見的代價是內存等資源消耗較多。

Webkit是Safari采用的內核，優點就是網頁瀏覽速度較快，勝于Gecko和Trident，缺點是對于網頁代碼的容錯性不好，即對網頁代碼的兼容性較低，會導致一些代碼編寫不規范的網頁無法正確顯示。

Blink由Google在2013年發布，是從WebKit內核衍生而來，是Google瀏覽器Chrome較新版本采用的內核。Google對Blink進行了大量優化，速度和兼容性均得到較大提升。

1.2典型的瀏覽器內核兼容性問題

1.2.1邊距差異

很多標簽在不同瀏覽器下的邊距會出現差異，這個問題的原因是各個瀏覽器的CSS盒模型有所不同，標簽默認的margin和padding有所差異。這個是以往最常見的也最易解決的瀏覽器兼容性問題，現在很多CSS文件開頭都會使用通配符*來初始化各個標簽的內外補丁，如在CSS中設置*{margin：0；padding：0；}。

1.2.2最小高度

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

1.2.3Textarea標簽

Textarea標簽設置width和height后，在IE瀏覽器中的實際高度寬度與其他瀏覽器不一致。IE瀏覽器中，Textarea實際高度寬度=設置的width和height值；而在其他瀏覽器（如Chrome，火狐等）中，Textarea實際高度寬度=設置的width和height值-padding值-border值。可以通過設置padding=0px；border=0px來解決這個問題。

1.2.4innerText失效

用javascript動態添加文本時，使用innerText在部分瀏覽器（如火狐瀏覽器）中失效。火狐中無法識別innerText，但能識別具有相似功能的標簽innerHTML。因此，統一使用innerHTML可保證JS代碼在不同瀏覽器中的有效性。

1.2.5鼠標事件

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

2瀏覽器版本及典型兼容性問題

2.1主要瀏覽器版本

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

2.2典型的瀏覽器版本兼容性問題

2.2.1默認margin不同

如Body標簽在IE8、9、10中默認margin為8px；而IE6、7中默認margin為15px10px15pxl0px。不僅在不同瀏覽器中標簽默認邊距不同，不同的IE版本中也有所不同，一樣可以在CSS中設置*{margin：0；padding：0；}來解決這個問題。

2.2.2Button默認type類型

Button標簽的默認type類型差異，舊版IE默認為button類型，從IE8開始，為了靠攏W3C標準，button的type屬性默認值改為submit了，所以一般在使用button標簽時，要盡量設置type類型，以適應不同IE版本。若不標明type類型，可能會影響表單提交。

2.2.3CSS3支持度

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

2.2.4使用JS關閉窗口

IE7及以上版本通過JS無法直接關閉窗口，會出現一個“您所訪問的窗口正試圖關閉”的確認對話框。這需要在關閉窗口的代碼window.opener=null；window.close（）；中加入window.open（""，" self"）。這個方法是當前頁面的opener賦為空字符串（空字串可不是null，并不是為空），然后關閉當前頁，做個按鈕來觸發這個方法。

2.2.5HTML5兼容性

IE8及以下正版本對較新的HTML5標簽的支持是很有限的，導致一些標簽無法顯示或錯位。可以在HTML頭部添加以下JavaScript代碼實現導入html5shiv包，

<！-[ifIE]>

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

<！[endif]->

上面代碼僅會在IE瀏覽器下運行，還有一點需要注意，在頁面中調用html5.JS文件必須添加在頁面的head元素內，因為IE瀏覽器必須在元素解析前知道這個元素，所以這個JS文件不能在頁面底部調用。

3用例測試

登錄

圖3：點擊之后按鈕樣式由左圖變為右圖

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

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

}

此代碼效果是當用戶點擊css樣式為.btn-login的“登錄”按鈕后，按鈕背景貼圖改變，字體顏色由原來的白色變為灰色。在IE8-10、Chrome、搜狗、火狐下CSS效果如圖3所示。

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

CSS2.1規范中描述的‘：focus偽類，在CSS1歷史規范中均無規定，這導致早期版本的瀏覽器，如：IE6IE7IE8（Q）不支持：focus偽類。如果在元素上使用了：focus偽類，會使預期的得到焦點時觸發效果在IE6 IE7 IE8（Q）中無效。目前較好的解決方案是使用JavaScript綁定onfocus onblur事件模仿‘：focus效果。endprint

3.2彈出新窗口相關代碼：

此代碼在IE、火狐、Chrome下實現了預期的效果，點擊注冊按鈕之后，可彈出如圖4所示的注冊小窗口。

但在搜狗發現無法彈出新的窗口，而是產生了一個新的網頁選項卡，如圖5所示，其中window.open方法中width、height、top、left這幾個參數完全失效了。注意到搜狗有“彈出窗口攔截”功能，但是不啟用該功能，window.open仍無法彈出新窗口。

搜狗Webkit內核下，會無視該彈窗是否為響應用戶鼠標操作的回調（a和input button以及button等點擊類交互標簽是不被攔截的），而一律強制攔截彈窗。比較折中的解決方案是在JS中判斷瀏覽器類型，在搜狗瀏覽器中不使用彈出窗口，而采用特定的CSS布局，讓注冊板塊居中，而不是如圖5中居左影響視覺效果。

3.3輸入框背景色

網站注冊頁面中的6個輸入框，正常樣式如圖6所示。

然而，輸入框背景色在Chrome瀏覽器中由默認的白色變為黃色，顯得與背景灰白色圖片不協調。

測試中發現，在第一次輸入時不會出現黃色背景，之后則每次均出現，而且在出現黃色背景的同時，Chrome瀏覽器會根據歷史記錄自動完成表單。經查資料，這黃色背景其實就是自動表單的標記。

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

background-color：#FAFFBD；

background-image：none；

color：#000；

}

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

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

3.4滾動條樣式

Java在線測試網站的考試頁面中，通過編寫CSS將滾動條顏色改為白色，使其無法看出，但是在搜狗和火狐瀏覽器中發現原有的CSS配色方案失效了，如圖7所示。

這表明在正下可行的CSS中SCROLLBAR標簽在搜狗和火狐瀏覽器中無法生效。究其原因，在Webkit內核下，網頁將不調用IE瀏覽器的滾動欄，而是使用Webkit自帶的滾動欄。因此，在webkit內核中，需要重新配置-webkit-scrollbar標簽的屬性，將其設置為透明或者白色（網頁背景色）均可。然而火狐Gecko內核下，無法對其自帶的滾動條樣式進行重新配色。不過，可以下載一些樣式美觀的滾動條插件來取代原生滾動條，然后再對滾動條插件根據網站需求進行重新配色。

3.5禁止網頁后退

在Java在線測試系統網站的測試模塊中，需實現防止在用戶交卷后返回做題頁面重新做題。IE下通過如下javascript腳本：

window.history.forward（1）；

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

在其他瀏覽器的測試中發現，該腳本在chrome中仍有效，但在搜狗和火狐中則失效。搜狗內核不能返回到做題頁面，但是成績頁面中每按一次“后退”都會刷新題目和正確答案，同時成績反復記錄。火狐則可直接返回到做題頁面修改答案，然后重新交卷，不過成績不會因答案的修改而改變，成績反復記錄。測試結果如表1所示。

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

基于上述分析，利用客戶端腳本將難以解決關于禁止“后退”的兼容性問題，為避免網站前端兼容性差異，最終通過服務器驗證來解決該問題。

4測試結果分析

基于上述測試結果，瀏覽器兼容性差異可劃分為CSS差異性和javascript差異性兩大類。不同內核的瀏覽器之間差異性相對較大，javascript差異性更為明顯。其主要原因是幾種內核對javascript中一些函數的支持度不同。相對而言，同一內核瀏覽器不同版本之間的差異性較小，主要是CSS差異，由于各版本發布時間的先后，其對應支持的CSS版本也不同，導致了較早期的版本對新CSS標簽無法識別。

5兼容性問題的普適性解決方案

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

（1）給不同瀏覽器綁定不同CSS和JS。具體而言，可以使用JS中的navigator對象來獲取當前瀏覽器類型和版本；Html中使用例如<！--[iflteIE6]>的hack標簽也可對瀏覽器版本進行判斷。

（2）使用javascript腳本實現樣式變化。使用JS實現CSS樣式變化，從而消除對CSS標簽支持度不同的兼容性問題，如6.1登錄按鈕樣式不一致的bug。

（3）取消一些瀏覽器的特殊效果。屏蔽某些瀏覽器的特殊效果，以到達各瀏覽器一致性。一些特殊效果對樣式布局產生了負面影響，而實用價值又不是很高，可以考慮剔除。如6.3輸入框背景顏色問題。endprint

（4）針對特定的瀏覽器加特定的標簽。在webkit內核瀏覽器中，很多標簽都是使用-webkit開頭，如6.4中-webkit-scrollbar標簽也可使用CSShack，就是針對不同的瀏覽器寫不同的CSS語言，比如IE6能識別下劃線“ ”和星號“*”，IE7能識別星號“*”但不能識別下劃線“ ”，而firefox兩個都不能認識。

（5）前臺功能由后臺程序實現。前端JS腳本的某些功能可以通過后臺程序實現，從而避免瀏覽器兼容性問題，如禁止網頁后退問題。

6結語

通過深入分析網頁兼容性問題存在的原因，從瀏覽器內核及其典型兼容性問題、不同瀏覽器版本及其典型兼容性問題等方面入手，對網頁兼容性問題作了較為系統的研究，同時采用實例網站對不同內核的瀏覽器以及同一瀏覽器不同版本之間進行了兼容性測試，并對結果進行分析，提出了一組具有普適性的網頁兼容性解決方案。

參考文獻

[1]李秀娟網頁在不同分辨率下的兼容性問題淺析[J]計算機光盤軟件與應用，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]劉增杰，臧順娟，何楚斌.網頁布局模式淺析[J].計算機光盤軟件與應用，2014（01）：184-185.

[8]曾欣.淺淡CSS在各個瀏覽器兼容性問題及解決方案[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