使用@media實現IE hack的方法

標籤：java   ie   media   hack   html   

眾所周知，有些時候為了實現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 　

       僅支援Google

       @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;   }}

本文出自 “華麗Dē‖Java Question” 部落格，請務必保留此出處http://teny32.blog.51cto.com/8027509/1772160

使用@media實現IE hack的方法