众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的。比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,而对于现代浏览器来说,他会直接无视这些代码。今天我想为大家介绍的是使用@media实现IE hack的方法:

  仅IE6和IE7识别

  @media screen\9 {   .selector {  property: value; } } 

  仅IE6和IE7、IE8识别

  @media \0screen\,screen\9 {   .selector {  property: value; } }

  仅IE8识别

  @media \0screen {   .selector {  property: value; } }

  仅IE8-10识别

  @media screen\0 {   .selector {  property: value; } } 

  仅IE9和IE10识别

  @media screen and (min-width:0\0) {   .selector {  property: value; } } 

  仅IE10识别

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {    /* IE10-spe  

       仅支持谷歌

       @media screen and (-webkit-min-device-pixel-ratio:0) {

        .footer .layout-help { padding-bottom:357px; } 

        } 



上面几个@media配合“\”、“\0”和“\9”就能让不同版本的IE识别,那么具体项目中我们要怎么使用呢?

打个比方,如果你的body中设置了一个红色的背景,而想让不同版本IE变成别的颜色,那么我们就可以这么操作


body {
  background: red;
}

/* IE6、IE7变成绿色 */
@media all\9 {
  body {
    background: green;
  }
}

/* IE8变成蓝色 */
@media \0screen {
  body {
    background: blue;
  }
}
/*IE9和IE10变成黄色*/
@media screen and (min-width:0\0) {
  body { 
    background: yellow; 
  }
}