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

李靈華，李秀靜

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

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

李靈華，李秀靜

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

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

CSS;兼容性;CSS Hack

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

1 CSS Hack

由于不同的瀏覽器，例如IE6、IE7、Firefox等，對CSS的解析認(rèn)識是不一樣的，因此會導(dǎo)致生成的頁面效果不一樣，甚至?xí)剐畔⑽恢缅e亂，從而達不到想要的顯示效果。為了能夠同時兼容不同的瀏覽器，能夠?qū)崿F(xiàn)在不同的瀏覽器中也能得到預(yù)期的頁面顯示效果，有一種方法就是針對不同的瀏覽器寫不同的CSS樣式。這種針對不同瀏覽器寫不同的CSS代碼的過程，就被稱為CSS Hack［1］。

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

2 問題與解決方法

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

（1）默認(rèn)邊距問題

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

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

（2）div下的表格內(nèi)容居中顯示問題

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

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

（3）垂直居中問題

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

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

（4）ul標(biāo)簽邊距問題

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

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

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

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

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

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

（6）高度不適應(yīng)問題

Firefox瀏覽器中存在高度不適應(yīng)問題，所謂高度不適應(yīng)問題是指當(dāng)內(nèi)層對象的高度發(fā)生變化時，外層高度不能自動調(diào)節(jié)適應(yīng)，特別是當(dāng)內(nèi)層對象使用margin和padding時，如圖5。可以使用如下代碼

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

圖5 Firefox瀏覽器的高度不適應(yīng)問題效果圖

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

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

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

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

3 結(jié)語

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

［1］李超.CSS網(wǎng)站布局實錄:基于Web標(biāo)準(zhǔn)的網(wǎng)站設(shè)計指南［M］.北京:科學(xué)出版社，2007.

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

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

［4］IE瀏覽器中文網(wǎng)站.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－），女，滿族，遼寧葫蘆島人，講師，主要從事計算機應(yīng)用技術(shù)教學(xué)研究。

（責(zé)任編輯 劉敏）