整理关于区别各大浏览器的css hack

区别符号:  [ \9 ],[ * ],[ _ ],[ !important ] ……       以及css选择符前缀法:[*html”],[*+html]……
符号说明: 
[ \9 ]:仅IE系列能识别;
[ * ]:仅IE6、IE7能识别;
[ _ ]:仅IE6识别;
[*html”]:仅IE6识别;
[*+html]:仅IE7识别;
[:root .class{****\9}]:仅IE9能识别 ;
@media all and (min-width:0){ .class{ ****\9 } }:仅IE9能识别,不过权重(优先级)比一行的小
 [ !important ]:仅IE6不能识别,即IE7、IE8、IE9、Firefox、Chrome、Safari、Opera能识别。
例子:
 .test{
 background:blue;
 background:red\9;
 *background:black;
 _background:orange;
 }
 :root .ie9{
background:yellow\9;
}

分析:
第一条:是正常情况下的;第二条:是专属IE系列的;第三条:是专属IE6、IE7的;第四条:是专属IE6的。
至此,我们可以从其他浏览器中区分出IE来,而IE里面,我们还区分了IE6、IE7,可是IE8、9呢?就是下面那段,只要我们把 [.ie9] 这个类名也加到元素中去的话,就可以区别IE8和IE9了。记着,不要跟上面那个混淆了。
所以,根据浏览器从上往下读的顺序,而且从下往上分析,可以得出注释()里的结果;而[ !important ]的用法则是这样的:background:green !important;

 

前面几个是加在css属性的前后,但是[*html”],[*+html]则是加在选择符前面。
记着,要用类名,不要用id,无论是上面的方法还是下面的方法,因为类名可以叠加多个类名,而id只能有一个,而且权重(优先级)比类名重。

例子:
*html .test{/*仅仅IE6能识别*/
background:blue;
}
*+html .test{/*仅仅IE7能识别*/
background:blue;
}

 

根据自己的需要,自己灵活运用以上的hack进行组合,得出 自己想要的结果

判断IE版本的语句<!–[if IE]><![endif]–>http://hedgehogking.com/?p=128
© 2012 Hedgehog Suffusion theme by Sayontan Sinha