internet-explorer - respond - modernizr 2.8 3 js
Respond.JS no funciona en IE 8 (21)
Asegúrese de estar utilizando un servidor local o servidor web. "Debido a restricciones de seguridad, algunos navegadores pueden no permitir que esta secuencia de comandos trabaje en el archivo: // urls (porque usa XMLHttpRequest ). Ejecútelo en un servidor web".
Por alguna razón, parece que responder JS no está funcionando. Estoy utilizando Media Consultas en IE 8 para cambiar las imágenes de fondo de varios monitores de tamaño. 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 tiene este aspecto:
@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 cual el código anterior no funcionaría en IE 8? ¿Hay otro JS que debería tratar de usar para hacer que las Consultas de Medios de IE 8 funcionen?
Nota: Parece que html5-shiv funciona. Estoy probando en un servidor web en vivo.
Debe colocar sus etiquetas de hoja de estilo <link> dentro de <head> . Aunque todos los navegadores cargarán y mostrarán las hojas de estilo vinculadas fuera del <head> , está (estaba) en contra de las especificaciones y respond.js no las procesará.
El mismo problema. Descubrí que es mi problema de secuencia de carga, porque escribo CSS en línea y luego llamo a responder js, así que parece
<script type="text/javascript" src="js/respond.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
Debería ser
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="js/respond.min.js"></script>
¡SIEMPRE vincule hojas de estilo o escriba CSS en línea antes de los scripts js!
En mi caso, el problema era que uno de los archivos CSS no estaba disponible en el servidor. respond.js procesa la lista del archivo css en una función recursiva. Con la primera falla ajax (req.status !== 200 && req.status !== 304) , falla silenciosamente. Tuve que arreglar el camino css incorrecto para que funcione.
He estado tratando de resolver este problema y finalmente encontré una solución. Mi problema era el CDN que utilizamos para almacenar todos nuestros medios.
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.
Internet Explorer 8 y versiones posteriores solo pueden cargar una cierta cantidad de archivos CSS, y solo pueden tener un número máximo de líneas. Si rebasas estos límites, el CSS no se cargará. Intenta combinar el contenido de CSS en un solo archivo.
La mejor práctica es incluir html5shiv.js y respond.js y asegurarse de ejecutar en un servidor local, por lo que funcionará bien.
<!--[if lt IE 9]>
<script src="js/html5shiv.js"> </script>
<script src="js/respond.min.js"> </script>
<![endif]-->
Espero que te ayude.
Pude hacer que esto funcionara, pero tuve que insertar el script en la etiqueta del 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: vea la respuesta de Wen, ya que la respuesta debe aparecer después de su CSS. En mi situación fue después del CSS, pero no funcionaría en la head por alguna razón. Cuando se insertó en el body , funcionó según lo previsto.
Resolví este problema al corregir el orden de las siguientes líneas; deberían ser 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">
Tuve la línea X-UA-Compatible por última vez y los diseños de columna no funcionaron, excepto en mi local.
Respond.JS, que es lo que Bootstrap usa para habilitar consultas de medios en Internet Explorer 8, no procesa archivos @import .
Desde el repositorio de GitHub: Respond.js no analiza el CSS al que se hace referencia a través de @import, ni funciona con consultas de medios dentro de elementos de estilo, ya que esos estilos no pueden volver a solicitarse para su análisis.
Tuve que cargar el bootstrap.css y cualquier CSS que contenga consultas de medios 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 siguiente método de importación NO funciona:
@import "bootstrap.min.css";
@import "media.css";
Respond.js no funciona si ves la página a través de un archivo: //
Use su carpeta con el servidor, entonces funcionará, como http://localhost/yoursitename/ .
Si intenta usar Internet Explorer 11 para emular versiones anteriores de Internet Explorer, tenga cuidado.
Internet Explorer 10 y versiones posteriores no son compatibles con los comentarios condicionales de IE . La primera versión de Internet Explorer 11 no los admite, incluso cuando se ejecuta como una versión anterior en modo de emulación. Ver Comentarios condicionales ya no son compatibles (MSDN).
Debe confirmar que tiene al menos la primera actualización de Internet Explorer 11. Si tiene dudas, solo tome la última.
Ver la corrección de errores en los comentarios condicionales no funcionan cuando se emulan modos de documentos a través de F12 Developer Tools
Y una discusión en la pregunta de ¿Por qué Internet Explorer 11 no respeta los comentarios condicionales incluso cuando se emula el modo de documento de Internet Explorer 8? .
Solo quería agregar que el example.html de github no funciona 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 desde XP necesita 2 cambios.
Descargar y extraer el contenido de https://github.com/scottjehl/Respond
Abra example.html en la carpeta de dominios cruzados Reemplace "rawgithub.com" con "rawgit.com" (IE8 / xp no le gusta la redirección al incluir los archivos css)
Cambie "https" a "http" ya que el CDN que utilizan usa SNI, que no es compatible con XP, por lo que si desea dar soporte a los usuarios de XP, tendrá que atender esto. (o menos, gasta mucho dinero para obtener una IP dedicada en su CDN)
Una vez que esto fue cambiado, todo funciona bien con el ejemplo :-) Espero que esto ayude a alguien :-) Código de ejemplo de trabajo 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>
Tenía los siguientes enlaces en la condición de Internet Explorer. Tenía que sacar esos scripts 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]-->
Reemplace con 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, como si incluyera estos scripts en el pie de página en lugar de en el encabezado.
Tuve el mismo problema y lo resolví quitando la etiqueta <base> en <head> . Encontré la solución en , la pregunta Respond.js no funciona en Internet Explorer 7, pero el ejemplo H5BP funciona . Puede ser causado por:
<base />
y no
<base></base>
Internet Explorer 6 - 8 (no estoy seguro de que haya 9) arroja un tambaleo cuando no hay una etiqueta de cierre. Entonces todas las otras etiquetas de head convierten en elementos secundarios de <base> . Y todo se rompe: /.
¡Espero que eso ayude!
Tuve el mismo problema, pero lo resolví cuando incluí Modernizr en mi proyecto.
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 respond.js comenzó a funcionar, así:
<link rel=''stylesheet'' href=''/css/screen.css'' />
<script src=''/js/vendor/respond.js''></script>
<script src=''http://polyfill.io/''></script>
Yo tuve el mismo problema. Después de pasar tanto tiempo, me di cuenta de que esto es causado por una variable MENOS. Anulé una variable de Bootstrap para desactivar las funciones de respuesta:
@grid-float-breakpoint: 0;
Esto fue lo que rompió respond.js.
Luego lo cambié a:
@grid-float-breakpoint: 0px;
y ahora funciona. Espero que ayude a alguien.
en primer lugar, el css para los archivos html y html debe estar alojado en el mismo dominio, ¡lo que finalmente funciona!
en segundo lugar,
<base target="_blank" />
debería escribirse como
<base target="_blank"></base>
He intentado todos los métodos mencionados anteriormente. podemos ver la demostración de los siguientes http://scottjehl.github.io/Respond/test/test.html luego intenté poner los archivos css en el mismo dominio del archivo html, y luego lo encontré con éxito. Si lo pones el css en el archivo html, tampoco podría funcionar.