css - para - Consulta de medios no funciona en IE9
internet explorer 11 hack css (5)
Estoy teniendo un problema extraño que solo ocurre con IE9. Estoy trabajando en una página web que tiene un diseño de escritorio y un diseño móvil. Mismo HTML, diferente CSS. El problema pasa con el siguiente código:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)
Todos los navegadores, con la excepción de IE9, muestran el sitio de escritorio según sea necesario. Los navegadores móviles muestran correctamente el diseño móvil. El problema con IE9 es que también muestra el diseño móvil.
Ahora, si elimino las palabras "solo" y "pantalla" del código anterior, IE9 muestra correctamente el sitio de escritorio. El problema es que los navegadores móviles también muestran el sitio de escritorio. He investigado esto y no he visto nada sobre este tema.
Gracias por leer,
Juan
El modo de compatibilidad de IE resuelve el problema. Vaya a Configuración de la vista de compatibilidad y desactive la opción Mostrar sitios de intranet en Vista de compatibilidad .
En caso de que alguien esté rastreando SO para obtener una respuesta a esto, las dos respuestas anteriores no resuelven el problema central que se responde aquí: la consulta de medios CSS no funciona en IE 9
Básicamente, las consultas de medios CSS3 en línea funcionan en IE9, pero tiene que deshabilitar el modo de compatibilidad.
<meta http-equiv="X-UA-Compatible" content="IE=9">
La metaetiqueta anterior debe colocarse antes que cualquier otra metaetiqueta. De lo contrario, IE9 usará el modo de compatibilidad predeterminado y, posteriormente, no funcionará.
Normalmente agrego esto a mis proyectos y me ha funcionado hasta ahora:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Por lo que puedo decir, se trata de que IE9 no interpreta "min-device-width" y "max-device-width".
Según http://msdn.microsoft.com/library/ms530813.aspx no admite esas propiedades, solo "min-width" y "max-width".
Además, http://www.w3.org/TR/css3-mediaqueries/#error-handling indica que se supone que el navegador ignora las propiedades que no reconoce. No es así con IE9 lo que parece.
Sí, use @media (max-width: 860px) lugar de max-device-width .
IE 9 me acaba de dar un ataque al corazón. Las consultas de medios del proyecto no funcionaron.
Luego, después de algunos minutos de googlear, debes incluir el CSS en el HTML. ¡Estilos en línea solamente!
¡Qué arrastre estos navegadores IE son!