使用@media实现IE hack的方法...

随着Responsive设计的流行，Medial Queries可算是愈来愈让人观注了。他可让Web前端工程实现不一样设备下的样式选择，让站点在不一样的设备中实现不一样的效果。这个早前在w3cplus已经介绍过，若是你尚未接触，不仿点击这里详细阅读。今天在看blog时发现一个其余的使用方法，就是利用@media来作一些IE下的特殊效果。

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

仅IE6和IE7识别

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

仅IE6和IE七、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; }  /* IE六、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方法能帮你解决问题，特别是国内的苦逼前端人员。