IE6、 IE7、IE8、Firefox兼容性問題

1.區別IE和非IE瀏覽器

#tip {

background: blue; /*IE背景藍色*/

background: red /9; /*IE6 IE7IE8背景紅*IE6,IE7,IE8,FF

 

2.【區別符號】:「/9」、「*」、「_

【示例】:

#tip {

background: blue; /*Firefox背景變藍色*/

background: red /9; /*IE8背景變紅色*/

*background: black; /*IE7背景變黑色*/

_background: orange; /*IE6背景變橘色*/

}

【說明】:因爲 IE系列瀏覽器可讀「/9」,而IE6IE7可讀「*(米字號),另外IE6可辨識「_(底線),因此可以依照順序寫下來,就會讓瀏覽器正確的讀取到自己看得懂得CSS語法,所以就可以有效區分IE各版本和非IE瀏覽器(像是FirefoxOperaGoogle ChromeSafari)

 

3.區別IE6IE7Firefox (方法 1)

【區別符號】:「*」、「_

【示例】:

#tip {

background: blue; /*Firefox背景變藍色*/

*background: black; /*IE7背景變黑色*/

_background: orange; /*IE6背景變橘色*/

}

【說明】:IE7IE6可讀「*(米字號)IE6又可以讀「_(底線),但是IE7卻無法讀取「_」,至於Firefox(IE瀏覽器)則完全無法辨識「*」和「_」,因此就可以透過這樣的差異性來區分IE6IE7Firefox

 

4.區別IE6IE7Firefox (方法 2)

【區別符號】:「*」、「!important

【示例】:

#tip {

background: blue; /*Firefox背景變藍色*/

*background: green !important; /*IE7背景變綠色*/

*background: orange; /*IE6背景變橘色*/

}

【說明】:IE7可以辨識「*」和「!important」,但是IE6只可以辨識「*」,卻無法辨識「!important」,至於 Firefox可以讀取「!important」但不能辨識「*」因此可以透過這樣的差異來有效區分IE6IE7Firefox

 

5.區別IE7Firefox

【區別符號】:「*」、「!important

【示例】:

#tip {

background: blue; /*Firefox背景變藍色*/

*background: green !important; /*IE7背景變綠色*/

}

【說明】:因爲 Firefox可以辨識「!important」但卻無法辨識「*」,而IE7則可以同時看懂「*」、「!important」,因此可以兩個辨識符號來區隔IE7Firefox

 

6.區別IE6IE7 (方法 1)

【區別符號】:「*」、「_

【示例】:

#tip {

*background: black; /*IE7背景變黑色*/

_background: orange; /*IE6背景變橘色*/

}

【說明】:IE7IE6都可以辨識「*(米字號),但IE6可以辨識「_(底線)IE7卻無法辨識,透過IE7無法讀取「_」的特性就能輕鬆區隔 IE6IE7之間的差異。

 

7.區別IE6IE7 (方法 2)

【區別符號】:「!important

【示例】:

#tip {

background: black !important; /*IE7背景變黑色*/

background: orange; /*IE6背景變橘色*/

}

【說明】:因爲 IE7可讀取「!important;」但IE6卻不行,而CSS的讀取步驟是從上到下,因此IE6讀取時因無法辨識!important」而直接跳到下一行讀取CSS,所以背景色會呈現橘*IE6Firefox

 

8.【區別符號】:「_

【示例】:

#tip {

background: black; /*Firefox背景變黑色*/

_background: orange; /*IE6背景變橘色*/

}

【說明】:因爲IE6可以辨識「_(底線),但是 Firefox卻不行,因此可以透過這樣的差異來區隔FirefoxIE6,有效達成CSS hack

 

PS:博客搬家了,以後不再 CSDN 更新了,見諒。最新博客地址:http://www.cnblogs.com/yjzhu/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章