CSS hank

CSS hank

CSS hank是为了让CSS代码兼容不同浏览器，也可以通过CSS hank为不同的浏览器设置不同的CSS样式。

CSS hank的3种表现形式：

• 类内部hank
  
  IE6能识别下划线_和星号*,但不能识别!important ;
  
  IE7能识别星号*和!important ，但不能识别下划线_;
  
  IE8只能识别\0和!important;
  
  FF能识别!important，但不能识别 *;
  
  -减号是IE6专有的hack;
  
  \9 IE6/IE7/IE8/IE9/IE10都生效;
  
  \0 IE8/IE9/IE10都生效，是IE8/9/10的hack;
  
  \9\0 只对IE9/IE10生效，是IE9/10的hack;

• 选择器hank
  
  选择器hank是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
  
  *html " * "前缀只对IE6生效
  
  *+html " * +"前缀只对IE7生效
  
  @media screen\9{...}只对IE6/7生效
  
  @media \0screen {body { background: red; } 只对IE8有效
  
  @media \0screen\,screen\9{body { background: blue; } 只对IE6/7/8有效
  
  @media screen\0{body { background: green; } 只对IE8/9/10有效
  
  @media screen and (min-width:0\0){body { background: gray; } 只对IE9/10有效
  
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){body { background: orange; } 只对IE10有效

• IE注释hank
  
  IE注释hank是IE浏览器专有的Hack方式.
  
  只在IE下生效

   <!--[if IE]>
   这段文字只在IE浏览器显示
   <![endif]-->
  

  只在IE6下生效

   <!--[if IE 6]>
   这段文字只在IE6浏览器显示
   <![endif]-->
  

  只在IE6以上版本生效

   <!--[if gte IE 6]>
   这段文字只在IE6以上(包括)版本IE浏览器显示
   <![endif]-->
  

  只在IE8上不生效

   <!--[if ! IE 8]>
   这段文字在非IE8浏览器显示
   <![endif]-->
  

  非IE浏览器生效

   <!--[if !IE]>
   这段文字只在非IE浏览器显示
   <![endif]-->
  

区分各种浏览器

1.区分IE和非IE浏览器

.class{
background:blue;/*IE、非IE都生效*/
background:red \9;/*IE6.7.8.9.10都生效*/
}

2.区分IE6,7,8,FF

.class{
background:blue;/*FF*/
background:red; \9;/*IE8*/
*background:green;/*IE7*/
_background:black;/*IE6*/
}

3.区分IE6,7,FF

 .class1{
background:blue;/*FF*/
*background:green;/*IE7*/
_background:black;/*IE6*/
}
 .class2{
background:blue;/*FF*/
*background:green !important;/*IE7*/
*background:black;/* IE6可以识别*和_ */
}

4.区分IE7,FF

 .class{
background:blue;/* FF可以识别!important，但无法识别* */
*background:green !important;/*IE7*/
}

5.区分IE6,7

 .class1{
*background:green;/*IE7*/
_background:black;/*IE6*/
}
 .class2{
background:green !important;/*IE7*/
background:black;/* IE6不能识别!important */
}

6.区分IE6,FF

 .class{
background:blue;/* FF */
_background:green;/*IE6*/
}