CSS HACK - pod4g/tool GitHub Wiki

戳这里，你会发现惊喜！！！！！！

一、Webkit内核CSS hack（Chrome、Safari、Opera）

注：很奇怪，在Windows10中的Edge（版本是13）下，竟然也起作用，莫非微软要向Webkit看齐？

@media screen and (-webkit-min-device-pixel-ratio:0) { 
     .demo { 
       /*  
        这里写只在Webkit内核的浏览器下起作用的样式
       */
     } 
  }

二、Firefox CSS hack

@-moz-document url-prefix(){
  
     .demo { 
        /*  
         这里写写只在firefox中起作用的样式
        */
     } 
}

三、IE8/9/10/11 CSS hack

@media screen\0 {
   .demo{
       /* 
        这里写在IE 8 9 10 11下起作用的样式
      */
   }
}

四、IE6/7/8 CSS hack

@media \0screen\,screen\9 {
    .demo{
        /* 
          这里写在IE 6 7 8 下起作用的样式
       */
    }
  }

五、IE9/10 CSS hack

注：IE9/10能识别CSS属性值后面的\9\0,所以想要在IE9/10下表现出来的样式，可以在后面加\9\0即可 此hack有一个问题，即设置的所有属性在IE7下都不起作用，可以使用 IE6/7 的hack来修复一下

display: none\9\0;

六、IE6/7 CSS hack

注：IE6/7能识别CSS属性前面的 * ,所以想要在IE6/7下表现出来的样式，可以在前面面加 * 即可

*display:none;

七、IE8 CSS hack

@media \0screen\,screen\9 {
    .demo{
         /* 
          这里写在IE8 下起作用的样式
        */
    }
   }

八、IE7 CSS hack

注：IE7的单独的CSS hack 必须结合着IE6的hack使用

*color:red;
_color:green;

九、IE6 CSS hack

_color:green;

十、IE9 CSS hack

经过不懈的寻找，我终于找到了IE9 only的hack，这也是一个组合hack，需要用到IE10+的hack（见十一）和IE9/10的hack 💯

  /* IE9 css hack */
  .demo{
    color:green;
    color:red\9\0;
    *color:green;
  }
  @media screen and (-ms-high-contrast:active),(-ms-high-contrast: none) { 
   .demo { color: green; } 
  }

十一、IE10+ CSS hack

/* IE10+ css hack */
.demo{
  color:green;
}
@media screen and (-ms-high-contrast:active),(-ms-high-contrast: none) { 
   .demo { color: red; } 
}

十一、各种CSS hack的测试例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试CSS HACK</title>
<style type="text/css">
    /*  webkit css hack  */
    .webkit-hack{
        color:green;
    }
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
     .webkit-hack { 
       color:red;
     } 
  }
  /* firefox css hack */
  .firefox-hack{
    color:green;
  }
  @-moz-document url-prefix(){
    .firefox-hack{
        color:red;
    }
  }
  /* IE8/9/10/11 css hack */
  .IE-hack{
    color:green;
  }
  @media screen\0 {
     .IE-hack{
        color:red;
      }
  }
  /* IE6/7/8 css hack */
  .IE678-hack{
      color:green;  
   }
   @media \0screen\,screen\9 {
    .IE678-hack{
        color:red;
    }
   }
  /* 
    IE9/10 css hack 
    他有一个问题：
    无法在IE7及以下起作用即在IE7及以下2个color都不起作用，文本显示为黑色
    所以可以用IE6/7的hack修复一下
  */
  .IE910-hack{
    color:green;
    color:red\9\0;
    *color:green;
  }
  /* IE67 css hack */
  .IE67-hack{
    color:green;
    *color:red;
  }
  /* IE8 hack */
  .IE8-hack{
      color:green;  
   }
   @media \0screen\,screen\9 {
    .IE8-hack{
        color:red;
        *color:green;
    }
   }

  /* 
    IE7 css hack 
    听说在傲游浏览器下也起作用？
    那位同学试一下，并且把起作用的傲游浏览器版本区间告诉我
  */
  .IE7-hack{
    color:green;
    *color:red;
    _color:green;
  }
  /* IE6 css hack */
  .IE6-hack{
    color:green;
    _color:red;
  }
 /* IE10+ css hack */
.IE10AndUp-hack{
  color:green;
}
@media screen and (-ms-high-contrast:active),(-ms-high-contrast: none) { 
   .IE10AndUp-hack { color: red; } 
}
 /* IE9 css hack */
  .IE9-hack{
    color:green;
    color:red\9\0;
    *color:green;
  }
  @media screen and (-ms-high-contrast:active),(-ms-high-contrast: none) { 
   .IE9-hack { color: green; } 
  }
</style>
</head>
<body>
  <p class="webkit-hack">我在webkit内核浏览器下显示为红色，在其他非webkit内核浏览器下显示为绿色</p>
  <p class="firefox-hack">我在firefox浏览器下显示为红色，在其他浏览器下显示为绿色</p>
  <p class="IE-hack">我在IE8/9/10/11浏览器下显示为红色，在其他浏览器下显示为绿色</p>
  <p class="IE10AndUp-hack">我在IE10/11浏览器下显示为红色，在其他浏览器下显示为绿色</p>
  <p class="IE678-hack">我在IE6/7/8浏览器下显示为红色，在其他浏览器下显示为绿色</p>
  <p class="IE910-hack">我在IE9/10浏览器下显示为红色，在其他浏览器下显示为绿色</p>
  <p class="IE67-hack">我在IE6/7浏览器下显示为红色，在其他浏览器下显示为绿色</p>
  <p class="IE8-hack">我在IE8浏览器下显示为红色，在其他浏览器下显示为绿色</p>
  <p class="IE9-hack">我在IE9浏览器下显示为红色，在其他浏览器下显示为绿色</p>
  <p class="IE7-hack">我在IE7浏览器下显示为红色，在其他浏览器下显示为绿色</p>
  <p class="IE6-hack">我在IE6浏览器下显示为红色，在其他浏览器下显示为绿色</p>
</body>
</html>

记录（测试）于2016年3月4号

其中 Chrome 、Safari、Firefox、_Opear_在Mac OS X中测试；IE、_Edge13_在Windows10中测试。

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️