2011-05-18 13 views
5

Tengo un montón de CSS escrito que hace que mi sitio se dirija a Mobile primero, luego uso CSS Media Queries para cargar otra hoja de estilo para navegadores de escritorio. Lo hago porque hay tantos navegadores móviles que no entienden las consultas de medios de CSS, y es más probable que los usuarios de computadoras de escritorio tengan navegadores modernos que lo respalden.CSS condicional no cargado por IE7 e IE8

Tengo el siguiente CSS que funciona en todos los navegadores modernos (IE9, Chrome, Firefox 3.6+, Safari 4 + 5):

que luego se dio cuenta de que IE7 e IE8 no soportan CSS Medios consultas para la arriba no funcionaría. Por lo que añade una sentencia condicional para cargarlo:

<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)" /> 

Sin embargo, el uso de IE Tester y Browsershots, he confirmado que el desktop.css no se carga en IE 7 y 8. Parece ser que haciendo caso omiso de hoja de estilo por completo.

Intenté cambiar el enunciado condicional a <!-- [if IE 8]> pero eso no tuvo ningún efecto.

Por último, retira la instrucción de condición por completo, lo que resulta en este código:

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

Este último intento produce mi desktop.css están cargando en IE7 e IE8. Así que esto prueba que el CSS está bien. Solo parece que mi declaración condicional no se está activando.

¿Alguna idea de lo que estoy haciendo mal?

+1

No estoy seguro de si este es el problema, pero intente eliminar los espacios. '' -> '' – Shaz

Respuesta

8

Eliminar los espacios. Esto rompe el conditional syntax. De lo contrario, IE lo está tratando como un comentario normal.

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

¡Gracias, este fue el problema! (Nota: haga un cambio en su comentario final, debe ser '' – TMC

+0

Gracias. He actualizado mi respuesta. Me alegro de que funcionó. –