The method of realizing IE hack using @media

Article Introduction: 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 would like to introduce you to the use of @media implementation of IE hack method.

With the popularity of responsive design, medial queries can be regarded as more and more people to view the note. He allows web front-end projects to implement style selection under different devices, allowing sites to achieve different results in different devices. This earlier in W3cplus has been introduced, if you have not contacted, do not imitate click here for detailed reading. Today in the blog to find another way to use, is to use @media to do some of the special effects of IE.

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 {  

IE8 Identification only

@media \0screen {   . selector {  

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) {    

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

For example, if you set a red background in the body, and want to make different versions of IE into other colors, then we can do so

body {   background:red;}  /* IE6, IE7 turn green */@media all\9 {   body {     background:green;   }}  /* IE8 becomes blue */@media \0screen {   body {     background:blue;   }}/*ie9 and IE10 turn yellow */@media screen and (min-width: 0\0) {   body {      background:yellow;    }}    

ie hack method I always do not advocate the use, but these methods very few people know, paste up with you to share, hope in the circumstances, these hack methods can help you solve problems, especially the domestic bitter force front-end personnel.

The method of realizing IE hack using @media