2011-08-02 20 views
8

He incluido algunas consultas de medios en mi diseño para cambiar el ancho de algunos elementos de la página según el ancho del navegador. Las consultas se ven así:La consulta de medios CSS no funciona en IE 9

@media screen and (min-width:1024px) 
@media screen and (max-width:1024px) 

Chrome, Safari y Firefox funcionan muy bien, solo IE es un problema. Sé que todas las versiones anteriores a IE 9 no son compatibles con esta característica, pero no funcionan en IE 9 en absoluto. ¿Cuál podría ser el problema?

Respuesta

13

¿Tiene el modo de compatibilidad activado?

+1

El modo de compatibilidad se activó. Apagarlo resolvió el problema. Muchas gracias. – Sacha

+2

Gracias, esto también solucionó mi problema ... pensé en mencionarlo en caso de que ayudara a alguien más en mi IE9. En "Configuración de vista de compatibilidad" tenía la opción "Mostrar sitios de intranet en vista de compatibilidad" marcada, que parecía ser la defecto ??? y esto afectaba a los sitios servidos desde mi servidor WAMP – byronyasgur

+0

¿El modo de compatibilidad es un modo predeterminado en IE9? –

-6

Desafortunadamente, el ancho mínimo simplemente no es compatible con ninguna versión de IE. Por lo tanto, si usa esta convención:

<!--- CSS Selector :: Desktop ---> 
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width:960px)" label="desktop"> 

<!--- CSS Selector :: Tablet PC ---> 
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width:768px) and (max-width:959px)" label="tablet"> 

<!--- CSS Selector :: Phone ---> 
<link rel="stylesheet" type="text/css" href="css/phone.css" media="screen and (min-width:320px) and (max-width:499px)" label="phone"> 

Ignorará todo.

Reference.

+1

Sería útil si proporcionó una solución alternativa. Y de acuerdo con su enlace 'Referencia', IE 7-9 es compatible con 'min-width'. – Amy

2

Asegúrese de tener la declaración DOCTYPE correcta. Es muy recomendable que los sitios web utilizan el tipo de documento HTML 5 con el fin de apoyar la más amplia variedad de estándares establecidos y emergentes (en este caso: CSS3), así como la más amplia gama de navegadores web: <!DOCTYPE html>

0

usar las siguientes condiciones

@media only screen (min-width: 1px) and (max-width:599px) 

en lugar de

@media only screen (max-width:599px) 

y asegúrese min-width es 1px como IE9 no se pastilla 0px