使用@media實現IE hack的方法

網頁製做Webjx文章簡介：衆所周知，有些時候爲了實現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和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-spe 　

       僅支持谷歌

       @media screen and (-webkit-min-device-pixel-ratio:0) {

        .footer .layout-help { padding-bottom:357px; } 

 

 

 

 

 

 

 

@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){} IE10--IE11

@media screen and (min-width:0\0){} IE9--IE11

@media screen\9 {} IE7及如下

@media \0screen\,screen\9 {} IE8及如下

@media \0screen {} IE8

@media screen\0 {} IE8及以上

Solve problems in the most elegant way

        }　

 

 

 

有IE就有hack，看看IE9的css hack，IE8的css hack；上次同事說一個頁面IE10下有問題，IE9下測試了一下，也有一樣的問題。悲劇了趕忙找IE10的hack。google上翻到的IE10 CSS Hacks 還算比較實用的。記錄一下以備後用。1、特性檢測：@cc_on咱們能夠用IE私有的條件編譯(conditional compilation)結合條件註釋來提供針對ie10的Hack：該腳本里面的IE排除條件註釋，以確保IE6-9不認可它，而後它功能檢測到了名爲@ cc_on。if (/*@cc_on!@*/false) {document.documentElement.className+=’ ie10′;}</script><!–<![endif]–>請注意/*@cc_on ! @*/中間的這個感嘆號。這樣就能夠在ie10中給html元素添加一個class=」ie10″，而後針對ie10的樣式能夠卸載這個這個選擇器下：.ie10 .example {/* IE10-only styles go here */}這是ie10，IE8模式下的截圖：考錄到兼容之後的IE版本，好比IE11，js代碼能夠改一下：if (/*@cc_on!@*/false) {document.documentElement.className+=’ ie’ + document.documentMode;}關於document.documentMode能夠查看IE的documentMode屬性（IE8+新增）。多是想多了，實事上經測試預覽版的IE11已經不支持@ cc_on語句，不知道正式版會不會支持。不過這樣區分IE11卻是一件好事。這樣修改代碼：以上代碼是針對IE11及非IE瀏覽器，由於:IE11下document.documentMode爲11，因此html標籤上會加ie11樣式類；而非IE瀏覽器的document.documentMode爲undefined，因此html標籤上會加ieundefined樣式類。這樣把IE11也區分出來了，IE11預覽版下的截圖：。呵呵，純屬YY，IE11正式版還不知道什麼樣子，並且在實際的項目中隨着IE的逐漸標準化，IE11和IE10可能不多用不到css hack。2、@media -ms-high-contrast 方法IE10支持媒體查詢，而後也支持-ms-high-contrast這個屬性，因此，咱們能夠用它來Hack IE10：@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {   /* IE10-specific styles go here */}這種寫法能夠適配到高對比度和默認模式。因此能夠覆蓋到全部ie10的模式了。這種方式在預覽版的IE11中也生效。固然，方法二也能夠和方法一一塊兒用：if (window.matchMedia(「screen and (-ms-high-contrast: active), (-ms-high-contrast: none)」).matches) {    document.documentElement.className += 「ie10″;}3、@media 0 方法這個方法不是太完美，由於IE9和預覽版的IE11也支持media和\0的hack。@media screen and (min-width:0\0) {    /* IE9 , IE10 ,IE11 rule sets go here */}總之，隨着IE的逐漸標準化，IE11和IE10可能不多用不到css hack，不看也罷。轉自：《IE10 CSS Hack（順便聊聊IE11的CSS Hack）》