CSS基础知识——CSS兼容性

1.区别IE和非IE的浏览器

#tip { background:blue;/*非IE 背景蓝色*/ background:red \9;/*IE678 背景红色*/}

2.区别IE6,IE7,IE8,FF

[区别符号]: \9,*,_

[示例]:

#tip{

background:blue;/*FF 背景蓝色*/

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

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

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

} 

[说明]:因为IE系列浏览器可读"\9",而IE6 IE7可读"*",另外IE6可读"_",因此可以依照顺序写下来,就会让浏览器正确的读取到自己看的懂的CSS语法,所以就可以有效区分IE各版本和非IE浏览器(如FF,Opera,Google Chrome,Safari等)。

3.区别IE6 IE7 FF(方法一)

[区别符号]: *,_

[例]:

#tip{

background:blue;/*FF 背景蓝色*/

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

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

}

4.区别IE6 IE7 FF(方法二)

[区别符号]: *,!important

[例]:

#tip{

background:blue;/*FF 背景蓝色*/

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

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

}

[说明]:IE7可以读"*"和"!important", 但是IE6只可以读"*",缺无法读"!important",至于FF可以读"!important"但是不可以读"*",因此可以这样的有效区隔IE6 IE7和FF。

5.区别IE7 FF

[区别符号]: *,!important

[例]:

#tip{

background:blue;/*FF 背景蓝色*/

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

}

6.区别IE6 IE7(方法一)

[区别符号]: *,_

[例]:

#tip{

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

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

} 

[说明]:IE6和IE7都可以读"*",但是IE6可以读"_",IE7却无法读取,这样就可以轻松区隔IE6IE7之间的差异。

7.区别IE6 IE7(方法二)

[区别符号]: !important

[例]:

#tip{

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

background:blue;/*IE6 背景蓝色*/

}

[说明]:IE7可以读"!important",但是IE6不可以,并且CSS的读取步骤是从上到下，因IE6读取时无法辨识"!important"而直接跳到下一行读取CSS故IE6背景是蓝色。

8.区别IE6 FF

[区别符号]: _

[例]:

#tip{

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

_background:blue;/*IE6 背景蓝色*/

}