Responder.JS No funciona en IE 8


Por alguna razón parece que respond JS no está funcionando. Estoy usando Media Queries en IE 8 para cambiar imágenes de fondo para monitores de varios tamaños. En IE 8 no hay fondo, solo un color sólido.

El código se ve así:

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

La Consulta de medios se ve así:

@media (min-width:769px) and (max-width:1366px){
 html, body{
   background: url(/images/backgrounds/1366-bg.jpg)  no-repeat center top fixed #190303;
   background-size:100% auto;
 }
}

¿Hay alguna razón por la que el código anterior no funcionaría en IE 8? ¿Hay otro JS que debería usar para hacer que IE 8 Media Queries Funcione?

Nota: parece que el html5-shiv funciona. Yo estoy probando en un servidor web.

Author: L84, 2013-02-28

21 answers

El mismo problema. Descubrí que es mi problema de secuencia de carga, porque escribo CSS en línea y luego llamo responder script js, por lo que parece

<script type="text/javascript" src="js/respond.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

Debe ser

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<script type="text/javascript" src="js/respond.min.js"></script>

SIEMPRE vincular hojas de estilo o escribir CSS en línea antes de scripts js!

 90
Author: Wen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-01 21:48:56

Podría ser porque estás alojando tu CSS en un subdominio o CDN.

Responde.js funciona solicitando una copia prístina de su CSS a través de Ajax , por lo que si aloja sus hojas de estilo en una CDN (o un subdominio), deberá cargar una página proxy para habilitar la comunicación entre dominios.

 13
Author: R Burchall,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-22 08:31:53

Pude hacer que esto funcionara, pero tuve que insertar el script en la etiqueta body.

<head>
    <!-- Code -->
</head>
<body> 
    <!--[if lt IE 9]>
        <script type="text/javascript" src="/js/respond.min.js"></script>
    <![endif]-->

    <!-- Site Code -->
</body>

No estoy seguro de por qué esto funciona, pero resolvió mi problema.

Tenga en cuenta: Ver La respuesta de Wen como la respuesta.js debe venir después de su CSS. En mi situación fue después del CSS, pero no funcionaría en el head por alguna razón. Cuando se inserta en el body funcionó como estaba previsto.

 8
Author: L84,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:03:09

Responde.JS, que es lo que Bootstrap usa para habilitar consultas de medios en Internet Explorer 8, no procesa @import archivos.

Desde el repositorio GitHub: Responder.js no analiza CSS referenciado a través de @import, ni funciona con consultas de medios dentro de elementos de estilo, ya que esos estilos no se pueden volver a solicitar para el análisis.

Tuve que cargar el bootstrap.css y cualquier CSS que contenga media queries en el encabezado

<link href='css/bootstrap.min.css' rel='stylesheet' type='text/css' media='all' />
<link href='css/media.css' rel='stylesheet' type='text/css' media='all' />

El el siguiente método de importación NO funciona:

@import "bootstrap.min.css";
@import "media.css";
 7
Author: hsobhy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-22 08:32:47

Asegúrese de que está utilizando un host local o servidor web. "Debido a restricciones de seguridad, algunos navegadores pueden no permitir que este script funcione en las urls file:// (porque usa XMLHttpRequest). Ejecutarlo en un servidor web."

Fuente: https://github.com/scottjehl/Respond

 3
Author: Peter_B.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-22 08:26:30

La mejor práctica es incluir html5shiv.js y responde.js y asegúrese de ejecutar en un localhost, por lo que va a funcionar bien.

<!--[if lt IE 9]>

    <script src="js/html5shiv.js"> </script>
    <script src="js/respond.min.js"> </script>

<![endif]--> 

Espero que te ayude.

 2
Author: Venu immadi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-22 08:31:02

Si está intentando usar Internet Explorer 11 para emular versiones anteriores de Internet Explorer, tenga cuidado.

Internet Explorer 10 y posteriores no admiten IE comentarios condicionales. La primera versión de Internet Explorer 11 no era compatible con ellos, incluso cuando se ejecuta como una versión anterior en modo de emulación. Véase Los comentarios condicionales ya no son compatibles (MSDN).

Debe confirmar que tiene al menos la primera actualización de Internet Explorer 11. En caso de duda, simplemente agarra la última.

Ver la corrección de errores en Los comentarios condicionales no funcionan al emular modos de documento a través de Herramientas de desarrollador F12

Y una discusión en la pregunta Stack Overflow¿Por qué Internet Explorer 11 no respeta los comentarios condicionales incluso cuando emula el modo de documento de Internet Explorer 8?.

 2
Author: jeff-h,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:33:16

Este error se produce porque el script "responder.min.js " usa Ajax o algo similar. Usted debe colocar su proyecto en un servidor local o remoto como WAMP o XAMPP.

 1
Author: Genaro,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-22 08:28:22

Solo quería añadir a esto que el ejemplo.html de github no funciona fuera de la caja para IE8 en XP!

Descubrí que el ejemplo de github no funcionaba cuando se copiaba a mi servidor. La solución que encontré fue que el ejemplo cuando se prueba con IE8 de XP necesita 2 cambios!

  • Descargue y extraiga el contenido de https://github.com/scottjehl/Respond

  • Ejemplo abierto.html en la carpeta de varios dominios Reemplazar "rawgithub.com" con "rawgit.com" (IE8 / xp no le gusta la redirección cuando se incluye el css archivos)

  • Cambie "https" a "http" ya que la CDN que usan usa SNI que no es compatible con XP, por lo que si desea admitir usuarios de XP, necesitará para atender a esto! (o a menos que gastes mucho dinero para conseguir un ip dedicada en su CDN)

Una vez que esto fue cambiado, todo funciona bien con el ejemplo :-) Espero que esto ayude a alguien :-) Ejemplo de trabajo.código html a continuación:

  <!DOCTYPE html>
  <html>
     <head>
        <meta charset="utf-8" />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
        <meta name=”viewport” content=”width=device-width, initial-scale=1?>
        <title>Respond JS Test Page</title>
        <link href="http://rawgit.com/scottjehl/Respond/master/test/test.css" rel="stylesheet"/>
        <link href="http://rawgit.com/scottjehl/Respond/master/test/test2.css" media="screen and (min-width: 600px)" rel="stylesheet"/>
        <script src="../dest/respond.src.js"></script>
        <!-- Respond.js proxy on external server -->
        <link href="http://rawgit.com/scottjehl/Respond/master/cross-domain/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
        <link href="respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
        <script src="respond.proxy.js"></script>
     </head>
     <body>
        <p>This is a visual test file for cross-domain proxy.</p>
        <p>The media queries in the included CSS file simply change the body's background color depending on the browser width. If you see any colors aside from black, then the media queries are working in your browser. You can resize your browser window to see it change on the fly.</p>
        <p id="attribute-test">Media-attributes are working too! This should be visible above 600px.</p>
     </body>
  </html>
 1
Author: Liam Wheldon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-23 09:15:33

Resolví este problema corrigiendo el orden de las siguientes líneas; deberían estar en este orden:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Tenía la última línea compatible con X-UA y los diseños de columna no funcionaban, excepto en mi local.

 0
Author: Katherine,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-07 19:00:45

Debe colocar sus etiquetas de hoja de estilos <link> dentro de <head>. A pesar de que todos los navegadores cargarán y renderizarán hojas de estilo enlazadas fuera de <head>, está (estaba) en contra de las especificaciones y respond.js no las procesará.

 0
Author: Charlie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-16 21:59:51

Usando polyfill.io ¿también?

En caso de que esto ayude a alguien más, estaba usando polyfill.io y lo estaba cargando antes de responder.js. Necesitaba moverlo después y responder.js comenzó a trabajar, así:

<link rel='stylesheet' href='/css/screen.css' />
<script src='/js/vendor/respond.js'></script>
<script src='http://polyfill.io/'></script>
 0
Author: tprsn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-12 10:46:24

Tuve el mismo problema, pero lo resolví cuando incluí Modernizr en mi proyecto.

 0
Author: Rich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-22 08:33:27

Tenía los siguientes enlaces en la condición de Internet Explorer. Tuve que quitar esos guiones de la condición.

<!--[if lt IE 9]>    
    <script type="text/javascript" src="~/Content/js/html5shiv.js"></script>
    <script type="text/javascript" src="~/Content/js/respond.min.js"></script>
<![endif]-->

Sustitúyase por esto:

<script type="text/javascript" src="~/Content/js/html5shiv.js"></script>
<script type="text/javascript" src="~/Content/js/respond.min.js"></script>

Parece que la condición tiene el mismo efecto que si incluyes estos scripts en el pie de página en lugar del encabezado.

 0
Author: Martin Brabec,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-22 08:34:34

He estado tirando de mi cabello hacia fuera sobre este problema y finalmente se dio cuenta de una solución. Mi problema fue el CDN que usamos para almacenar todos nuestros medios.

Moví respond.js y mis archivos CSS todos en el mismo dominio y todo funcionó como se esperaba. Espero que esto ayude a alguien en una situación similar.

 0
Author: Joshua Maynard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-22 08:35:18

Internet Explorer 8 y versiones posteriores solo pueden cargar un cierto número de archivos CSS, y solo pueden tener un cierto número máximo de líneas. Si sobrepasa estos límites, el CSS no se cargará. Intenta combinar contenido CSS en un solo archivo.

 0
Author: user1491819,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-22 08:35:57

En primer lugar,el css para el html y los archivos html debe ser alojado en el mismo dominio, que finalmente funciona!

En segundo lugar,

<base target="_blank" />

Debe escribirse como

<base target="_blank"></base>

He probado todos los métodos mencionados anteriormente. podemos ver la demo de lo siguiente http://scottjehl.github.io/Respond/test/test.html luego traté de poner los archivos css en el mismo dominio del archivo html,luego lo encontré exitoso.Si coloca el css en el archivo html, no se pudo trabajar bien.

 0
Author: pigfly,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-28 09:44:58

Yo tenía el mismo problema. Después de pasar tanto tiempo, me di cuenta de que esto es causado por una variable MENOS. Anulé una variable Bootstrap para desactivar las funciones de respuesta:

@grid-float-breakpoint: 0;

Esto fue lo que rompió responder.js.

Luego lo cambié a:

@grid-float-breakpoint: 0px;

Y ahora funciona. Espero que ayude a alguien.

 0
Author: Orkun Tuzel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-16 07:24:02

En mi caso, el problema era que uno de los archivos css no estaba disponible en el servidor. responder.js procesa la lista de archivos css en una función recursiva. Con el primer fallo ajax (req.status !== 200 && req.status !== 304), falla silenciosamente. Tuve que arreglar la ruta CSS equivocada para que funcionara.

 0
Author: krishnakumarp,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-08 08:51:19

Responde.js no funciona si ves la página a través de file: / /
Use su carpeta con el servidor, entonces funcionará, como http://localhost/yoursitename / .

 0
Author: Selvanayagam M,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-07 08:31:03

Tuve el mismo problema y lo resolví eliminando la etiqueta <base> en el <head>. Encontré la solución en la pregunta de desbordamiento de pila Responde.js no funciona en Internet Explorer 7, pero el ejemplo H5BP funciona. Puede ser causada por:

<base />

Y no

<base></base>

Internet Explorer 6 - 8 (no estoy seguro acerca de 9) lanzar un tambaleante cuando no hay etiqueta de cierre. Entonces todas las demás etiquetas head se convierten en elementos secundarios de <base>. Y todo se rompe :/.

I espero que ayude!

 -4
Author: Just Plain High,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:18:34