衆所周知，有些時候爲了實現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-spe
僅支持谷歌
@media screen and (-webkit-min-device-pixel-ratio:0) {
.footer .layout-help { padding-bottom:357px; }
}
上面幾個@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;
}
}