Medial Queries的另一用法：实现IE hack的方法

所谓Medial Queries就是媒体查询。

随着Responsive设计的流行，Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择，让站点在不同的设备中实现不同的效果。

众所周知，有些时候为了实现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-specific styles go here */
}

上面几个@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;
  }
}
 

IE的Hack方法我向来不提倡使用，但这些方法很少有人知道，贴上来与大家分享，希望在不得已的情况之下，这些hack方法能帮你解决问题。

Web页面制作中尽量不要使用CSS Hack来处理兼容问题。因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求，或者说违背了浏览器的某些规则而先造成的，所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果，除非到了万不得已情况下，才考虑CSS的Hack。