使用@media实现IE hack的方法:
仅IE6和IE7识别
@media screen9 { .selector { property: value; } }
仅IE6和IE7、IE8识别
@media screen\,screen9 { .selector { property: value; } }
仅IE8识别
@media screen { .selector { property: value; } }
仅IE8-10识别
@media screen { .selector { property: value; } }
仅IE9和IE10识别
@media screen and (min-0 ) { .selector { property: value; } }
仅IE10识别
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10-specific styles go here */ }
上面几个@media配合“”、“ ”和“9”就能让不同版本的IE识别,那么具体项目中我们要怎么使用呢?
打个比方,如果你的body中设置了一个红色的背景,而想让不同版本IE变成别的颜色,那么我们就可以这么操作
body { background: red; } /* IE6、IE7变成绿色 */ @media all9 { body { background: green; } } /* IE8变成蓝色 */ @media screen { body { background: blue; } } /*IE9和IE10变成黄色*/ @media screen and (min-0 ) { body { background: yellow; } }