The method of realizing IE hack using @media

As we all know, sometimes in order to achieve some of the effects of IE and modern browser consistent, we have to use some hack means to achieve the purpose. For example, using "\", "\" and "\9" to only allow certain versions of IE to be recognized, and for modern browsers, he will directly ignore the code. Today I want to introduce to you the method of implementing IE hack using @media:

Only IE6 and IE7 recognition

@media screen\9 {. selector {property:value;}}

Only IE6 and IE7, IE8 identification

@media \0screen\,screen\9 {. selector {property:value;}}

IE8 Identification only

@media \0screen {. selector {property:value;}}

IE8-10 Identification only

@media screen\0 {. selector {property:value;}}

Only IE9 and IE10 recognition

@media screen and (min-width:0\0) {. selector {property:value;}}

IE10 Identification only

@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {/* Ie10-spe

Google support only

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

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

}

above a few @media with "\", "" "and" \9 "can let different versions of IE recognition, then the specific project how do we use it?

body {  background: red;} /* ie6, IE7 into green  */@media  all\9 {  body {    background:  green;  }}/* ie8 into Blue  */@media  \0screen {  body {     BACKGROUND: BLUE;  }}/*IE9 and IE10 turn yellow */@media  screen and  ( min-width:0\0)  {  body {     background: yellow;    }} 

This article is from the "beautiful Dē‖java Question" blog, please be sure to keep this source http://teny32.blog.51cto.com/8027509/1772160

The method of realizing IE hack using @media