Instance code: Method of using @media to implement IE hack

Article Introduction: as we all know, sometimes in order to achieve some of the effects of IE in line with modern browsers, we have to use some hack means to achieve the goal. For example, the use of "", "\" and "\9" to allow only some version of IE to identify, and for modern browsers, he will directly ignore the code. Today I want to introduce you to the use of @media to achieve IE hack method.

With the popularity of responsive design, medial queries can be regarded as more and more people to watch. He can let the Web front-end project to achieve different devices under the choice of style, so that the site in different devices to achieve different results. This earlier in W3cplus already introduced, if you have not contacted, do not imitate click here to read in detail. Today in the blog to find a other 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 in line with modern browsers, we have to use some hack means to achieve the goal. For example, the use of "", "\" and "\9" to allow only some version of IE to identify, and for modern browsers, he will directly ignore the code. Today I want to introduce you to the use of @media to achieve IE hack method:

Only IE6 and IE7 recognition

@media screen\9 {   . selector {  Property:value}}}  

Only IE6 and IE7, IE8 recognition

@media \0screen\,screen\9 {   . selector {  

Only IE8 recognition

@media \0screen {   . selector {  

Only ie8-10 recognition

@media screen\0 {   . selector {  Property:value}}}  

Only IE9 and IE10 recognition

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

Only IE10 recognition

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

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

For example, if you have a red background in your body, and you want different versions of IE to turn into another color, then we can do that.

body {   background:red;}  /* IE6, IE7 into green/@media all\9 {body   {     background:green;   }}  /* IE8 to Blue/@media \0screen {body   {     background:blue   }}/*ie9 and IE10 into yellow/@media screen and Min-width: 0\0) {body   {      background:yellow    }}}    

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