Geek Answers Handbook

Conditional CSS not loaded by IE7 and IE8

I have a bunch of CSS written that makes my site first mobile, and then I use CSS Media Queries to load another stylesheet for desktop browsers. I do this because there are so many mobile browsers that don’t understand CSS Media Queries, and it’s more likely that desktop users have modern browsers that support this.

I have the following CSS that works in all modern browsers (IE9, Chrome, Firefox 3.6+, Safari 4 + 5):

Then I realized that IE7 and IE8 do not support CSS Media requests, so the above will not work. So I added a conditional statement to load it:

<link rel="Stylesheet" type="text/css" href="/css/mobile.css" media="all"/>
<!-- [if lt IE 9]>
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="all" />
<! [endif] -->  
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="only screen and (min-width: 640px)" />

However, using the IE tester and Browsershots, I confirmed that it desktop.cssdoes not load in IE 7 and 8. It seems to completely ignore this stylesheet.

Then I tried to change the conditional operator to <!-- [if IE 8]>, but that did not affect.

Finally, I completely deleted the condition statement, which resulted in this code:

<link rel="Stylesheet" type="text/css" href="/css/mobile.css" media="all"/>
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="all" />

This last attempt loads my desktop.css in IE7 and IE8. So this proves that CSS is fine. It just looks like my conditional instruction does not start.

Any ideas what I'm doing wrong?

+5
source share
1 answer

Remove the spaces. This violates the conditional syntax. Otherwise, IE treats it as a regular comment.

<!--[if IE 8]>
...
<![endif]-->
+8
source

More articles:


All Articles