IE6/7/8/9 Firefox的CSS兼容问题

这是关于IE的一系列兼容问题的解决方法。

1.不同浏览器版本代码区分

“9”　可以区别所有IE和FireFox.
“*”　IE6、IE7可以识别.IE8、FireFox不能.
“_”　IE6可以识别,IE7、IE8、FireFox不能. 如此,就可以完全区分开IE6、IE7、IE8、FireFox了.

例如：

.color{
   background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
   background-color: #FF00009; /*IE6、IE7、IE8会显示红色*/
   *background-color: #0066FF; /*IE6、IE7会变为蓝色*/
   _background-color: #009933; /*IE6会变为绿色*/ }

2.再增加一点区分

“:root” IE9可以识别，其他浏览器不能.

“:last-child” IE9和firefox可以识别，IE6、7、8不行。

另外!important，也可以用来区分IE6和其他浏览器。!important能提高css的权限，IE6不认识这个标识。但是并不是说IE6就不认识!important前面的css了。所以用!important的时候必须同样的语句写2句，不然岂不是没有东西是低权限了么。

比如不能写成下面的样子：

.color{   background-color: #CC00FF !important; /*光这么写，虽然非IE6都提高了权限，但是IE6还是能显示#CC00FF*/ } 

要写成：

.color{   background-color: #CC00FF !important; /*非IE6都提高这句的权限*/   background-color: #000000;/*这句再后面，对IE6来说2句权限一样，所以用#000000代替#CC00FF*/ }

3.IE6左边距2倍的问题，只要在代码中增加display: inline;

#box {   float: left;   margin-left: 100px;   display: inline;/*主要是这句*/ }

4.IE下判断IE版本的语句

如上面的例子，用if语句就能在不同IE版本浏览器下调运对应的css文件。

lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ： 就是不等于的意思，跟javascript里的不等于判断符相同

注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。