Medial Queries的另一用法——服务于IE

仅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方法能帮你解决问题，特别是国内的苦逼前端人员。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/moving-ie-specific-css-into-media-blocks