使用@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和IE七、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; }  /* IE六、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方法能幫你解決問題，特別是國內的苦逼前端人員。