IE6，IE7及FF火狐瀏覽器的區(qū)別和兼容方法是什么

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)IE6，IE7及FF火狐瀏覽器的區(qū)別和兼容方法是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

IE6，IE7及FF火狐瀏覽器的區(qū)別和兼容方法

1.IE7與IE6相比,有多達(dá)200多處改進(jìn),但它們都是在StrictMode下實(shí)現(xiàn)的，即在頁首聲明DocType為XHTMLTransitional,XHTMLStrict等.而在QuirksMode下,IE7和IE6別無二致。所以為了更好的兼容，盡量聲明DocType，采用StrictMode進(jìn)行制作。

2.IE7支持Alpha通道的PNG圖片，但是這些Alpha通道圖片在IE6下還是不能正常顯示的，所以還是盡量使用透明GIF圖片。

3.IE7盒子模型改變了：盒子對(duì)于"overflow"使用了"visible"默認(rèn)值,所以對(duì)于子元素尺寸大于父元素尺寸時(shí),IE7會(huì)和Firefox一樣將子元素露出于父元素之外顯示,而不是像IE6那樣把父元素?fù)未罅税釉?把頁面設(shè)置成"overflow:visible"即可。

4.設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6存在的bug。解決方案是在這個(gè)div里面加上"display:inline"。

5.IE和火狐對(duì)'width'定義的不同：

Firefox中：容器占的寬度=內(nèi)容寬度+padding寬度+border寬度；

IE中：內(nèi)容寬度=您定義的容器寬度(InternetExplorer'width')-padding寬度-border寬度
(InternetExplorer'width'則是指整個(gè)容器的寬度，包括內(nèi)容，padding，border)

6.css布局的居中問題：FF火狐里設(shè)置margin-left,margin-right為auto時(shí)已經(jīng)居中,IE則設(shè)置body{TEXT-ALIGN:center;}才行

7.FF火狐設(shè)置padding后,div會(huì)增加height和width,但I(xiàn)E不會(huì),故需要用!important多設(shè)一個(gè)height和width

8.在mozillafirefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：div{margin:30px!important;margin:28px;}

9.ul標(biāo)簽在FF火狐中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;}

10.終結(jié)解決方法：

(1)!important：FF火狐和IE7對(duì)于"!important"會(huì)自動(dòng)優(yōu)先解析，IE6則忽略,可用!important為FF火狐和IE7單獨(dú)設(shè)置樣式，不影響IE6的顯示，值得注意的是，一定要將xxxx!important這句放置在另一句之上。

示例：div{margin:30px!important;margin:15px;}//在FF火狐和IE7中margin:30px，在IE6中margin:15px;

(2)由于FF火狐和IE7都支持"!important"，而二者之間也存在差異，所以有時(shí)也會(huì)出現(xiàn)一些小問題，針對(duì)IE7可以使用使用"*+html"。

示例

：#example{color:#333;}/*FF火狐下字體顏色顯示為#333*/  *html#example{color:#666;}/*IE6下字體顏色顯示為#666*/  *+html#example{color:#999;}/*IE7下字體顏色顯示為#999*/

上述就是小編為大家分享的IE6，IE7及FF火狐瀏覽器的區(qū)別和兼容方法是什么了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。