Saturday, May 11, 2013

IE8 CSS Hack

Using IE8 CSS Hack


You can use the ie8 css hack to force internet explorer to accept your @media queries. The ie8 css hack circumvents the inherent blockage/neglect by internet explorer. 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 
IE8 CSS Hack
IE8 CSS Hack
The above is discarded by IE9 and earlier. A way around this problem is by using the ie8 only css hack. 

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 this ie8 css hack for @media queries.
It does not solve everybody's problem depending on your exact coding but using this css ie8 hack can help in some instances.

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.