使用@media实现IE hack的方法

使用@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;    } }