宋玉偉，李隱峰，齊 鵬

(西安電子科技大學電子工程學院，陜西西安 710071)

CSS瀏覽器兼容性問題研究

宋玉偉，李隱峰，齊 鵬

(西安電子科技大學電子工程學院，陜西西安 710071)

針對層疊樣式表瀏覽器兼容問題，文中分別從瀏覽器、兼容問題解決技巧和CSS調(diào)試3個方面入手。首先介紹常用瀏覽器;接著列出常見CSS瀏覽器兼容問題，并給出了解決方法;最后介紹兩種界面設(shè)計者常用的檢驗工具:IETester和 Firefug。

CSS;瀏覽器;兼容性;IETester;Firefug

因瀏覽器開發(fā)者對CSS國際通用標準W3C(World Wide Web Consortium)理解不同，而導(dǎo)致同一網(wǎng)頁在不同的瀏覽器中呈現(xiàn)不同的效果，即所謂的瀏覽器兼容問題。若界面設(shè)計者能夠周全地考慮兼容問題，不僅能體現(xiàn)其技術(shù)水平，也是對其網(wǎng)站用戶負責的一種態(tài)度［1］。

1 常用瀏覽器介紹

瀏覽器是萬維網(wǎng)(Web)服務(wù)的客戶端瀏覽程序，可向萬維網(wǎng)服務(wù)器發(fā)送各種請求，并對從服務(wù)器發(fā)來的超文本信息和各種多媒體數(shù)據(jù)格式進行解釋、顯示和播放。

幾種常用瀏覽器:

(1)IE(Internet Explorer)瀏覽器。介紹是由Microsoft公司開發(fā)，因其捆綁在Windows系統(tǒng)中，并且是免費推出，所以占據(jù)著絕大部分的市場份額。目前，IE瀏覽器使用較多的版本是IE6.0、IE7.0、IE8.0以及IE9.0。以IE為內(nèi)核的常見瀏覽器:世界之窗(The World);傲游瀏覽器(Maxthon);騰訊 TT(Tencent Traveler);360安全瀏覽器;搜狗瀏覽器(Sougou Explorer)等。

(2)Mozilla Firefox(火狐)瀏覽器。Firefox是由Mozilla公司開發(fā)的一個開源瀏覽器，它能夠跨多個操作系統(tǒng)，此外還具有體積小、速度快等優(yōu)點。這款免費的開源瀏覽器也占據(jù)著很大的市場份額。

2 CSS瀏覽器兼容性問題分析與解決

(1)各瀏覽器的內(nèi)外補丁默認值不同。在網(wǎng)頁中隨便寫幾個標簽，如果對其不加任何樣式控制，在各種瀏覽器下顯示的效果就會有較大差別。這是因為各瀏覽器padding和margin默認值不同。這是最常見的瀏覽器兼容性問題，解決方法就是在 CSS(Cascading Style Sheet，CSS)文件開頭用通配符*設(shè)置各個標簽的內(nèi)外補丁為 0，即*{margin:0;padding:0;}［2］。

(2)margin加倍的問題。塊屬性標簽被設(shè)置float后，如果又有橫向的margin，在IE6.0中顯示的margin值將是設(shè)置值的2倍。這是IE6.0的一個常見bug，是float布局中最常見的兼容性問題。解決方法是在div標簽樣式控制中加入display:inline;將其轉(zhuǎn)化為行內(nèi)屬性［3］。

例如:＜div id=“test1”＞相應(yīng)的CSS代碼為:#test1{float:left;margin:10 px 0 0 10 px;}。在不同的瀏覽器下顯示如圖1和圖2所示;當樣式表中加入display:inline;后，IE6顯示效果如圖2所示。

(3)無法定義較小高度的容器。在IE6.0、IE7.0及遨游瀏覽器中，定義較小高度的標簽，這個標簽的高度不受控制，超出設(shè)置的高度。出現(xiàn)這個問題的原因是IE8.0之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使標簽是空的，高度還是會達到默認的行高。解決方法是給超出高度的標簽設(shè)置overflow:hidden;或者設(shè)置line－h(huán)eight小于設(shè)置的高度。

(4)圖片默認有間距。將幾個img標簽放在一起時，由于img標簽屬于行內(nèi)屬性的標簽，只要不超過容器寬度，img標簽都會在一行中顯示。但在某些瀏覽器下圖片之間會存在空隙，即使加了通配符*{margin:0;padding:0;}也不起作用。要去掉這個間距應(yīng)使用float屬性為img布局，雖然使用負margin也能夠解決，但由于負margin本身就很容易引起瀏覽器兼容性問題，所以不建議使用。

(5)標簽最小高度min－h(huán)eight不兼容。當一個標簽的內(nèi)容高度小于一個值(如500 px)時，這個標簽的高度為500 px。而當內(nèi)容高度 ＞500 px時，容器高度等于內(nèi)容的高度，而不出現(xiàn)滾動條。這時需要用到min－h(huán)eight:500 px;，但它在IE6.0瀏覽器中不能被識別。解決方法是{min－h(huán)eight:500 px;height:auto!important;height:100 px;overflow:visible;}

(6)div的居中問題。如果要讓一個具有一定寬度的div(＜div id=“container”＞…＜/div＞)在IE瀏覽器中水平居中顯示，只需用 body{text－align:center;}#container{width:800 px;}，但這在Firefox瀏覽器下卻不能實現(xiàn)。解決方法是將 CSS代碼改為body{text－align:center;}#container{width:800 px;margin:0 auto;text－align:left;}。

(7)ul和ol標簽的padding與margin問題。ul和ol標簽在Firefox瀏覽器中默認是有padding值的，而在IE瀏覽器中只有margin默認有值。這樣只要先定義ul(或ol){margin:0;padding:0;}即可。

(8)利用CSS Hack。根據(jù)不同的瀏覽器對CSS的支持及解析結(jié)果不同樣，CSS中的優(yōu)先級不同，可以對不同的瀏覽器寫不同的CSS，這就是CSS Hack的工作原理［4－5］。

首先需要了解以下規(guī)則:

其次，還需了解CSS代碼的優(yōu)先級，!important的優(yōu)先級最高，行內(nèi)樣式次之，ID選擇器再次之，類選擇器更次之，標簽選擇器最低。對于優(yōu)先級相同的按后出現(xiàn)優(yōu)先原則。

目前比較全的CSS Hack瀏覽器兼容性如表2所示［6］。

表1 瀏覽器CSS選擇器兼容性一覽表

續(xù)表1

3 IETester與Firebug

僅方便了網(wǎng)頁的調(diào)試，其編輯、挪動區(qū)塊位置、可視化標尺能夠為CSS學習者提供有效的幫助。

(1)IETester。針對IE瀏覽器的不同版本，界面設(shè)計者均需查看網(wǎng)頁的顯示效果，若在自己的機器上安裝各種版本的瀏覽器，較為復(fù)雜。IETester是免費軟件，是IE瀏覽器兼容性測試工具，它同時包括了 IE 5.5、IE6.0、IE7.0、IE8.0、IE9.0 的所有內(nèi)核，可在 IETester中查看不同IE版本的頁面顯示效果，以保證測試的頁面可在各版本IE瀏覽器中正確顯示。

(2)Firebug。Firebug是Firefox瀏覽器的一個插件，集網(wǎng)站語言查看與編輯、控制臺、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā)調(diào)試 JavaScript、CSS、HTML等網(wǎng)站語言的助手工具。

圖3 Firebug界面:CSS查看器

這里介紹的Firebug的CSS調(diào)試器，查看器能夠列出頁面調(diào)用的每一個CSS樣式表:定義位置、詳細CSS代碼及其從屬繼承關(guān)系。用戶可在該查看器中直接添加、修改、刪除CSS樣式表屬性，當前頁面即可直接顯示編輯后的頁面效果。Firebug的CSS查看器的功能不

4 結(jié)束語

集中介紹了常用瀏覽器、CSS兼容性問題、解決方法和兩種CSS調(diào)試工具，并且舉例說明網(wǎng)頁設(shè)計中經(jīng)常遇到的CSS樣式表在不同瀏覽器下的兼容性問題及其解決方法，并總結(jié)了瀏覽器兼容性。

［1］張志潔，李書明，趙玲.CSS技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用探析［J］.網(wǎng)絡(luò)通訊與安全，2007(10):30－36.

［2］RACHEL A.CSS精粹［M］.丁衛(wèi)穎，李奕，吳戈，譯.北京:人民郵電出版社，2007.

［3］鞏恩偉.CSS在瀏覽器中的兼容性及使用技巧［J］.電腦知識與技術(shù)，2009，5(6):1413 －1414.

［4］黎亞紅，羅藤.CSS在不同瀏覽器中的兼容性問題淺析［J］.岳陽職業(yè)技術(shù)學院院報，2008，23(3):84 －86.

［5］CBRISTOPBER S.CSS Cookbook［M］.陳寒林，譯.北京:電子工業(yè)出版社，2007.

［6］Bingo.瀏覽器/CSS選擇器兼容性總結(jié)［EB/OL］.(2010－10 －04)［2012 －01 －05］http://blog.bingo929.com/css－ browser－ support.html.

Study on Browsers Compatibility of Cascading Style Sheets

SONG Yuwei，LI Yinfeng，QI Peng
(School of Electronic Engineering，Xidian University，Xi'an 710071，China)

This paper approaches the browsers compatibility problems of CSS from three aspects:browser，solution to compatibility problem and CSS debugging.First it introduces commonly used browsers，and then it enumerates some CSS browser compatibility problems and gives the solution.Finally it presents two common inspection tools for CSS:IETester and firefug.

CSS;browser;compatibility;IETester;firefug

TP393.092

A

1007－7820(2012)08－147－03

2012-02-21

宋玉偉(1986—)，女，碩士研究生。研究方向:網(wǎng)絡(luò)信息處理，Web信息系統(tǒng)，數(shù)據(jù)庫系統(tǒng)。李隱峰(1974—)，男，副教授，碩士生導(dǎo)師。研究方向:Web信息系統(tǒng)，網(wǎng)絡(luò)安全，計算機網(wǎng)絡(luò)教學與應(yīng)用。