158 votos

IE8 soporte para consultas de medios de CSS

IE8 no admite la siguiente consulta de medios CSS:

@import url("desktop.css") screen and (min-width: 768px);

Si no, ¿cuál es la forma alternativa de escribir? El mismo funciona bien en Firefox.

Cualquier problema con el código siguiente.

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

334voto

Knu Puntos8385

css3-técnicaconsultas-js es probablemente lo que usted está buscando: esta secuencia de comandos emula a preguntas de los medios. Sin embargo (a partir de la secuencia de comandos del sitio) "no funciona en @imported hojas de estilo (que no se debe usar de todos modos, por razones de rendimiento). También no escuchar el atributo media de la <link> y <style> elementos".

En la misma línea, usted tiene la más simple Respond.js, que sólo habilita min-width y max-width consultas de medios de comunicación.

59voto

Aaron Puntos1030

Versiones de Internet Explorer antes de que IE9 no admiten preguntas de los medios.

Si usted está buscando una manera de degradar el diseño para los usuarios de IE8, usted puede encontrar IE condicional comentando útil. El uso de este, se puede especificar que una IE 8/7/6 específicas de la hoja de estilo que se sobre escribe el anterior reglamento.

Por ejemplo:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

Esto no permite un diseño de respuesta en IE8, pero podría ser más sencilla y más accesible solución que utilizar un JS del plugin.

42voto

Brandon Pugh Puntos554

La mejor solución que he encontrado es Respond.js especialmente si su principal preocupación es asegurarse de que su diseño sensible funciona en IE8. Es bastante ligero en 1kb cuando min/gzip y usted puede asegurarse de que sólo IE8 clientes de carga:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

También es el método recomendado si usted está usando bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9

12voto

Faraz Puntos1480

IE8 (y versiones anteriores) y Firefox antes de 3.5 no admite la consulta de medios de comunicación y safari 3.2 parcialmente apoyo. hay un par de técnicas que utilizan JavaScript para añadir soporte para estos navegadores:

Consultas de medios de comunicación jQuery plugin (sólo se ocupa de max/min ancho)

css3-técnicaconsultas-js - es una librería que tiene como objetivo agregar consulta de medios de apoyo a los navegadores que no los soportan

9voto

Bayo Puntos71

Tomado de la página del proyecto css3mediaqueries.js.

Nota: No funciona @import'ed hojas de estilo (que de todos modos no deberías usar por motivos de rendimiento). También no escuchará el atributo de los medios de comunicación de la <link> y <style> elementos.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: