CSS瀏覽器兼容性問題研究

宋玉偉，李隱峰，齊 鵬

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

CSS瀏覽器兼容性問題研究

宋玉偉，李隱峰，齊 鵬

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

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

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

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

1 常用瀏覽器介紹

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

幾種常用瀏覽器:

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

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

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

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

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

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

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

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

(5)標簽最小高度min－height不兼容。當一個標簽的內容高度小于一個值(如500 px)時，這個標簽的高度為500 px。而當內容高度 ＞500 px時，容器高度等于內容的高度，而不出現滾動條。這時需要用到min－height:500 px;，但它在IE6.0瀏覽器中不能被識別。解決方法是{min－height: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瀏覽器下卻不能實現。解決方法是將 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。根據不同的瀏覽器對CSS的支持及解析結果不同樣，CSS中的優先級不同，可以對不同的瀏覽器寫不同的CSS，這就是CSS Hack的工作原理［4－5］。

首先需要了解以下規則:

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

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

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

續表1

3 IETester與Firebug

僅方便了網頁的調試，其編輯、挪動區塊位置、可視化標尺能夠為CSS學習者提供有效的幫助。

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

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

圖3 Firebug界面:CSS查看器

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

4 結束語

集中介紹了常用瀏覽器、CSS兼容性問題、解決方法和兩種CSS調試工具，并且舉例說明網頁設計中經常遇到的CSS樣式表在不同瀏覽器下的兼容性問題及其解決方法，并總結了瀏覽器兼容性。

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

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

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

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

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

［6］Bingo.瀏覽器/CSS選擇器兼容性總結［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—)，女，碩士研究生。研究方向:網絡信息處理，Web信息系統，數據庫系統。李隱峰(1974—)，男，副教授，碩士生導師。研究方向:Web信息系統，網絡安全，計算機網絡教學與應用。