| 文章簡介：眾所周知，有些時候為了實現IE下的某些效果與現代瀏覽器一致，我們不得不使用一些hack手段來實現目的。比如說使用“\0”，“\”和“\9”來僅讓IE某些版本識別，而對於現代瀏覽器來說，他會直接無視這些代碼。今天我想為大家介紹的是使用@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和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方法能幫你解決問題，特別是國內的苦逼前端人員。