IE6、IE7、IE8、IE9、Firefox兼容性问题总结

1.区别IE和非IE浏览器

#tip{
background:blue; /*非IE背景蓝色*/
background:red\9; /*IE6、IE7、IE8背景红色*/
margin-top:10px\0; /*IE8、IE9*/
background:blue\9\0; /*IE9*/
}

2.区别IE6、IE7、IE8、Firefox

[区别符号]：[ \9 ]、[ * ]、[ _ ]、[ \0 ]

[示例]:

#tip{
background:blue; /*FF背景蓝色*/
background:red\0; /* IE8、IE9背景红色*/
background:blue\9\0; /*IE9*/
* background:blue; /*IE7*/
_ background:blue; /*IE6*/
}

3.区别ie6,ie7,ff(方法1)

[区别符号]： [ * ]、[ _ ]

[示例]:

#tip{
background:blue; /*FF背景蓝色*/
* background:blue; /*IE7*/
_ background:blue; /*IE6*/
}

[说明]：IE7和IE6可读[ * ]，[ _ ]只有IE6可读，火狐则完全无法辨识[ * ]和[ _ ]。

 

4.区别ie6,ie7,ff(方法2)

[区别符号]： [ * ]、[ !important ]

[示例]:

#tip{
background:blue; /*FF背景蓝色*/
* background:blue!important; /*IE7*/
* background:blue; /*IE6*/
}

[说明]：IE7可读[ * ]和[ !important ]，但是IE6只可读[ * ]，却无法识别[ !important ]，火狐可辨识[ !important ]。

 

5.区别ie7,ff

[区别符号]： [ * ]、[ !important ]

[示例]:

#tip{
background:blue; /*FF背景蓝色*/
* background:blue !important; /*IE7*/
}

[说明]：IE7可读[ * ]和[ !important ]，火狐只能辨识[ !important ]。

 

6.区别ie6, ie7(方法1)

[区别符号]： [ * ]、[ _ ]

[示例]:

#tip{
* background:blue; /*IE7*/
_ background:blue; /*IE6*/
}

[说明]：IE6和IE7可读[ * ]，但IE6只能辨识[_ ]。


7.区别ie6, ie7(方法2)

[区别符号]： [ !important ]

[示例]:

#tip{
background:blue !important; /*IE7*/
background:blue; /*IE6*/
}

[说明]： IE7可读[!important ]，但IE6不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识[!important ]而直接跳到下一行。
 

8.区别ie6, ff

[区别符号]： [ _ ]

[示例]:

#tip{
background:blue; /*ff*/
_background:blue; /*IE6*/
}

[说明]： [ _ ]只有IE6 可读。

 

9.区别ie8, ie9

一般来说，我们写的结构比较好的时候，ie8、 ie9下是没区别的，所以可能很少人关注只有ie8或者只有 ie9才识别的CSS HACK

因为IE8及以下版本是不支持CSS3的，但是如果我们使用CSS3，在IE下IE9正常渲染，但我们又想让IE8及以下的浏览器实现同样的效果，且不希望使用CSS3pie或htc或条件注释等方法时，可能就会需要用到IE8和IE9的专属CSS hack了。

.test{
color:#09f\0; /*IE8,IE9*/
color:#09f\0/; /*只有IE8 */
}
或者下面的
:root .test{ color:#09f\9; /*只有IE9*/ }
但是下面的这个优先级小于上面的。