武林網(wǎng)(www.survivalescaperooms.com)文章簡介：眾所周知，有些時候為了實現(xiàn)IE下的某些效果與現(xiàn)代瀏覽器一致，我們不得不使用一些hack手段來實現(xiàn)目的。比如說使用“/0”，“/”和“/9”來僅讓IE某些版本識別，而對于現(xiàn)代瀏覽器來說，他會直接無視這些代碼。今天我想為大家介紹的是使用@media實現(xiàn)IE hack的方法.
隨著Responsive設(shè)計的流行，Medial Queries可算是越來越讓人觀注了。他可以讓Web前端工程實現(xiàn)不同設(shè)備下的樣式選擇，讓站點在不同的設(shè)備中實現(xiàn)不同的效果。這個早前在w3cplus已經(jīng)介紹過，如果你還沒有接觸，不仿點擊這里詳細閱讀。今天在看blog時發(fā)現(xiàn)一個其他的使用方法，就是利用@media來做一些IE下的特殊效果。
眾所周知，有些時候為了實現(xiàn)IE下的某些效果與現(xiàn)代瀏覽器一致，我們不得不使用一些hack手段來實現(xiàn)目的。比如說使用“/0”，“/”和“/9”來僅讓IE某些版本識別，而對于現(xiàn)代瀏覽器來說，他會直接無視這些代碼。今天我想為大家介紹的是使用@media實現(xiàn)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中設(shè)置了一個紅色的背景，而想讓不同版本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方法能幫你解決問題，特別是國內(nèi)的苦逼前端人員。
新聞熱點
疑難解答
