Saturday, May 11, 2013

IE7 CSS hack

Using IE7 CSS Hacks

You can use ie7 css hacks to force internet explorer to accept your @media queries. After finding the great solution to browser responsive CSS with @media queries you probably cried when finding out they don't work in IE9 and earlier.

This is normal use of: @media 
IE7 CSS hack
IE7 CSS Hack
The above is discarded by IE9 and earlier. A way around this problem is by using CSS Hacks

To target IE 6 and 7

@media screen\9 {
    body { background: red; }
} 



To target IE 6, 7 and 8

@media \0screen\,screen\9 {
    body { background: green; }
} 

To target IE 8

@media \0screen {
    body { background: blue; }
} 

To target IE 8, 9 and 10

@media screen\0 {
    body { background: orange; }
} 

To target IE 9 and 10

@media screen and (min-width:0\0) {
    body { background: yellow; }
} 

Big thanks to Keith Clark for finding the ie7 css hacks out
It does not solve everybody's problem with @media queries. The css hack ie7 works, depending on your exact coding but it can help in some instances.

No comments:

Post a Comment