CSS基礎(chǔ)知識——CSS兼容性

1.區(qū)別IE和非IE的瀏覽器

#tip { background:blue;/*非IE 背景藍(lán)色*/ background:red \9;/*IE678 背景紅色*/}

2.區(qū)別IE6,IE7,IE8,FF

[區(qū)別符號]: \9,*,_

[示例]:

#tip{

background:blue;/*FF 背景藍(lán)色*/

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

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

_background:orange;/*IE6 背景橙色*/

} 

[說明]:因?yàn)镮E系列瀏覽器可讀"\9",而IE6 IE7可讀"*",另外IE6可讀"_",因此可以依照順序?qū)懴聛?就會讓瀏覽器正確的讀取到自己看的懂的CSS語法,所以就可以有效區(qū)分IE各版本和非IE瀏覽器(如FF,Opera,Google Chrome,Safari等)。

3.區(qū)別IE6 IE7 FF(方法一)

[區(qū)別符號]: *,_

[例]:

#tip{

background:blue;/*FF 背景藍(lán)色*/

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

_background:orange;/*IE6 背景橙色*/

}

4.區(qū)別IE6 IE7 FF(方法二)

[區(qū)別符號]: *,!important

[例]:

#tip{

background:blue;/*FF 背景藍(lán)色*/

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

*background:orange;/*IE6 背景橙色*/

}

[說明]:IE7可以讀"*"和"!important", 但是IE6只可以讀"*",缺無法讀"!important",至于FF可以讀"!important"但是不可以讀"*",因此可以這樣的有效區(qū)隔IE6 IE7和FF。

5.區(qū)別IE7 FF

[區(qū)別符號]: *,!important

[例]:

#tip{

background:blue;/*FF 背景藍(lán)色*/

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

}

6.區(qū)別IE6 IE7(方法一)

[區(qū)別符號]: *,_

[例]:

#tip{

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

_background:orange;/*IE6 背景橙色*/

} 

[說明]:IE6和IE7都可以讀"*",但是IE6可以讀"_",IE7卻無法讀取,這樣就可以輕松區(qū)隔IE6IE7之間的差異。

7.區(qū)別IE6 IE7(方法二)

[區(qū)別符號]: !important

[例]:

#tip{

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

background:blue;/*IE6 背景藍(lán)色*/

}

[說明]:IE7可以讀"!important",但是IE6不可以,并且CSS的讀取步驟是從上到下，因IE6讀取時無法辨識"!important"而直接跳到下一行讀取CSS故IE6背景是藍(lán)色。

8.區(qū)別IE6 FF

[區(qū)別符號]: _

[例]:

#tip{

background:black;/*FF 背景黑色*/

_background:blue;/*IE6 背景藍(lán)色*/

}