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会变为绿色*/
   }

   再增加一点区分

   “: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*/
   }

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

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

3. 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文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。