李靈華，李秀靜

（大連民族學院計算機科學與工程學院，遼寧大連 116605）

IE與Firefox瀏覽器CSS兼容性的解決方法

李靈華，李秀靜

（大連民族學院計算機科學與工程學院，遼寧大連 116605）

針對CSS對IE瀏覽器和Firefox瀏覽器不兼容的7個方面，提出了有效的解決方案，為網站開發(fā)和設計者提供有益的參考和借鑒。

CSS;兼容性;CSS Hack

隨著互聯網技術的普及和不斷的發(fā)展，用戶對頁面效果的要求也不斷提高。為了滿足用戶要求，符合WEB標準（即網站標準）的CSS+DIV網頁布局方式逐步取代了傳統(tǒng)的HTML網頁設計語言中的表格（TABLE）定位方式，成為時下倍受歡迎和被廣泛使用的網頁布局方式。雖然采用CSS布局有很多優(yōu)勢，但卻存在瀏覽器兼容性問題。所謂瀏覽器兼容性問題，是指因為瀏覽器的內核不同，致使其對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況［1］。在大多數情況下，網站設計者的需求是，無論用戶用什么瀏覽器來查看網站，或者登錄系統(tǒng)，都應該是統(tǒng)一的顯示效果。隨著瀏覽器版本的增多，解決瀏覽器兼容性問題顯得尤為重要，也成為網站前端開發(fā)的一個不可避免的問題。本文針對CSS布局在IE和Firefox瀏覽器中出現的一些常見的問題，整理出有效的解決辦法。

1 CSS Hack

由于不同的瀏覽器，例如IE6、IE7、Firefox等，對CSS的解析認識是不一樣的，因此會導致生成的頁面效果不一樣，甚至會使信息位置錯亂，從而達不到想要的顯示效果。為了能夠同時兼容不同的瀏覽器，能夠實現在不同的瀏覽器中也能得到預期的頁面顯示效果，有一種方法就是針對不同的瀏覽器寫不同的CSS樣式。這種針對不同瀏覽器寫不同的CSS代碼的過程，就被稱為CSS Hack［1］。

CSS Hack就是瀏覽器解析CSS時的漏洞，因此不同的瀏覽器就有不同的CSS Hack寫法。從長遠來看，CSS Hack會引起許多新的錯誤，因而應盡力避免使用CSS Hack，并尋找其它的應對方法。

2 問題與解決方法

通過大量及反復的試驗，針對CSS布局在IE和Firefox瀏覽器中出現的一些常見的問題，這里整理出了有效的解決辦法。

（1）默認邊距問題

由于各個瀏覽器默認的內外邊距不同，可用如下代碼來統(tǒng)一二者的邊距，統(tǒng)一后的效果如圖1。

圖1 IE瀏覽器和Firefox瀏覽器邊距統(tǒng)一后的效果圖

（2）div下的表格內容居中顯示問題

對于div中的表格內容，當設置其為居中顯示時，IE瀏覽器中為居中，而Firefox瀏覽器中為左對齊。如果想要在Firefox中實現內容居中，效果如圖2，其方法是增加代碼

圖2 IE瀏覽器和Firefox瀏覽器居中顯示統(tǒng)一后的效果圖

（3）垂直居中問題

對于設置為垂直居中顯示的圖片或文字內容，在Firefox瀏覽器中是垂直居中的，而IE瀏覽器中為頂端對齊。如果想要在IE瀏覽器中實現垂直居中，效果如圖3，其方法是增加代碼

圖3 IE瀏覽器和Firefox瀏覽器居中垂直居中顯示統(tǒng)一后的效果圖

（4）ul標簽邊距問題

ul標簽在Firefox瀏覽器中默認有一定的padding值，卻沒有margin值;而在IE瀏覽器中只是margin默認有值，卻沒有padding值。這時，為達到統(tǒng)一的顯示效果，如圖4，可以使用代碼［2］

圖4 IE瀏覽器和Firefox瀏覽器的ul標簽邊距統(tǒng)一后的顯示效果圖

（5）最小寬度和最小高度問題

min－width可以指定元素最小也不能小于某個寬度，min－h(huán)eight可以指定元素最小也不能小于某個高度，這樣可以保證排版一直正確。但是IE中不能識別此CSS命令，而是實際上把width和height當成最小寬度和最小高度來使用。這樣帶來的問題是，如果只用width和height，正常的瀏覽器里這兩個值就不會變;如果只用minwidth和min－h(huán)eight，IE下就等于沒有設置寬度和高度。而要設置背景圖片時，這個寬度又是比較重要的。為了這個命令在IE上能表現出效果，可以采用!Important來解決。!important是CSS1中就定義的語法，作用是提高指定樣式規(guī)則的應用優(yōu)先權。由于IE瀏覽器不支持該語法，而其他的瀏覽器則都支持。因此，可以使用如下代碼

或者還可以采用只有IE才能識別的Javascript語法的判斷來實現。即把＜div＞放到＜body＞標簽下，再為div指定一個類，然后使用如下代碼

最小高度問題可以采用上述同樣的兩種方法加以實現。

（6）高度不適應問題

Firefox瀏覽器中存在高度不適應問題，所謂高度不適應問題是指當內層對象的高度發(fā)生變化時，外層高度不能自動調節(jié)適應，特別是當內層對象使用margin和padding時，如圖5?？梢允褂萌缦麓a

要使對象在IE瀏覽器和Firefox瀏覽器中的高度統(tǒng)一，如圖6，解決方法是在外層對象上使用overflow的hidden屬性，可以使用如下代碼

圖5 Firefox瀏覽器的高度不適應問題效果圖

圖6 IE瀏覽器和Firefox瀏覽器的高度統(tǒng)一后的顯示效果圖

（7）在list項目下的超鏈接空行問題

IE瀏覽器中l(wèi)ist項目下的超鏈接存在空行問題。為達到統(tǒng)一的顯示效果，如圖7，其解決方法是為li增加如下代碼［4］

圖7 IE瀏覽器中l(wèi)ist項目下的超鏈接空行問題消除后的效果圖

3 結語

通過大量及反復的實驗，總結出了上述關于CSS布局在IE和Firefox瀏覽器中出現的常見的七個方面的問題，并提出了有效的解決方案，從而為網站開發(fā)和設計者提供有益的參考和借鑒。

［1］李超.CSS網站布局實錄:基于Web標準的網站設計指南［M］.北京:科學出版社，2007.

［2］BUDD A，MOLL C，CONLISON S.精通CSS:高級Web標準解決方案［M］.陳劍甌，譯.北京:人民郵電出版社，2010.

［3］溫謙.CSS設計徹底研究［M］.北京:人民郵電出版社，2008.

［4］IE瀏覽器中文網站.IE瀏覽器常見的9個css Bug以及解決辦法［EB/OL］.http://www.iefans.net.

Solutions for Compatibility of CSS Between IE Browser and Firefox Browser

LI Ling－h(huán)ua，LI Xiu－jing
（College of Computer Science＆Engineering，Dalian Nationalities University，Dalian Liaoning 116605，China）

Aiming at the seven aspects of the incompatibility of CSS Cetween IE Browser and Firefox Browser，some effective solutions are proposed，which provides a useful reference for the developers and designers of web site.

CSS;Compatibility;CSS Hack

TP393.092

A

1009－315X（2012）03－0265－04

2011－09－19;最后

2011－10－09

李靈華（1975－），女，滿族，遼寧葫蘆島人，講師，主要從事計算機應用技術教學研究。

（責任編輯 劉敏）