Respond.JS ne travaille pas dans IE 8
Pour une raison quelconque, il semble que répondre JS ne fonctionne pas. J'utilise Media Queries dans IE 8 pour modifier les images d'arrière-plan pour des moniteurs de différentes tailles. Dans IE 8, il n'y a pas de fond, mais une couleur unie.
Le code ressemble à ceci:
<!--[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 requête multimédia ressemble à ceci:
@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;
}
}
Y at-il une raison pour laquelle le code ci-dessus ne fonctionnerait pas dans IE 8? Existe-t-il un autre JS que je devrais essayer d'utiliser pour que IE 8 Media Queries fonctionne?
Remarque: il semble que html5-shiv fonctionne. Je teste sur un serveur web en direct.
Même problème. J'ai découvert que c'était mon problème de séquence de chargement, parce que j'écris CSS en ligne, puis j'appelle le script respond js.
<script type="text/javascript" src="js/respond.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
CA devrait etre
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="js/respond.min.js"></script>
TOUJOURS lier des feuilles de style ou écrire des CSS en ligne avant les scripts js!
C'est peut-être parce que vous hébergez votre CSS sur un sous-domaine ou CDN .
Respond.js fonctionne en demandant une copie vierge de votre CSS via Ajax , donc si vous hébergez vos feuilles de style sur un CDN (ou un sous-domaine), vous devrez télécharger une page proxy pour permettre la communication entre domaines.
Je pouvais faire ce travail, mais je devais insérer le script dans la balise body.
<head>
<!-- Code -->
</head>
<body>
<!--[if lt IE 9]>
<script type="text/javascript" src="/js/respond.min.js"></script>
<![endif]-->
<!-- Site Code -->
</body>
Je ne sais pas pourquoi cela fonctionne, mais cela a résolu mon problème.
S'il vous plaît noter: Voir réponse de Wen comme le respond.js devrait venir après votre CSS. Dans ma situation, c'était après le CSS, mais cela ne fonctionnerait pas dans head pour une raison quelconque. Une fois inséré dans la body, il a fonctionné comme prévu.
Respond.JS, qui est ce que Bootstrap utilise pour activer les requêtes de média dans Internet Explorer 8, ne traite pas les fichiers @import .
Depuis le référentiel GitHub: Respond.js n'analyse pas les CSS référencés via @import, ni ne fonctionne avec les requêtes multimédia dans les éléments de style, car ces styles ne peuvent pas être redemandés pour analyse.
Je devais charger le fichier bootstrap.css et tout fichier CSS contenant des requêtes multimédia dans l'en-tête.
<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' />
La méthode d'importation suivante ne fonctionne PAS:
@import "bootstrap.min.css";
@import "media.css";
Assurez-vous que vous utilisez un hôte local ou un serveur Web. "En raison de restrictions de sécurité, certains navigateurs peuvent ne pas autoriser ce script à fonctionner sur le fichier:: // urls (car il utilise XMLHttpRequest ). Exécutez-le sur un serveur Web."
La meilleure pratique consiste à inclure les fichiers html5shiv.js et respond.js et à vous assurer de les exécuter sur un hôte local afin que tout fonctionne correctement.
<!--[if lt IE 9]>
<script src="js/html5shiv.js"> </script>
<script src="js/respond.min.js"> </script>
<![endif]-->
J'espère que cela vous aidera.
Si vous essayez d'utiliser Internet Explorer 11 pour émuler des versions antérieures d'Internet Explorer, soyez prudent.
Internet Explorer 10 et les versions ultérieures ne prennent pas en charge les commentaires conditionnels IE. La première version d'Internet Explorer 11 ne les prenait pas en charge même lors de l'exécution d'une version antérieure en mode d'émulation. Voir Les commentaires conditionnels ne sont plus pris en charge (MSDN).
Vous devez vérifier que vous disposez au minimum de la première mise à jour d'Internet Explorer 11. En cas de doute, prenez simplement la dernière.
Voir le correctif dans Les commentaires conditionnels ne fonctionnent pas lors de l'émulation de modes de document via les outils de développement F12
Et une discussion à la question Stack Overflow Pourquoi Internet Explorer 11 n'accepte-t-il pas les commentaires conditionnels même lors de l'émulation du mode de document d'Internet Explorer 8?.
Je voulais juste ajouter à cela que le fichier example.html de github ne fonctionne pas immédiatement pour IE8 sous XP!
J'ai constaté que l'exemple de github ne fonctionnait pas lorsqu'il était copié sur mon serveur. La solution que j'ai trouvée est que l'exemple lors du test avec IE8 de XP nécessite 2 modifications!
Téléchargez et extrayez le contenu de https://github.com/scottjehl/Respond
Ouvrez exemple.html dans un dossier interdomaine. Remplacez «rawgithub.com» par «Rawgit.com» (IE8/xp n’aime pas la redirection lorsqu’il inclut les fichiers css ).
Remplacez «https» par «http», car le CDN utilisé utilise une interface SNI non prise en charge par Prise en charge par XP. Par conséquent, si vous souhaitez prendre en charge les utilisateurs de XP, vous aurez besoin de. ! (ou un peu moins, vous dépensez beaucoup d’argent pour obtenir une adresse IP dédiée sur votre CDN)
Une fois que cela a été changé, tout fonctionne bien avec l'exemple :-) J'espère que cela aidera quelqu'un :-) Le code example.html de travail ci-dessous:
<!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>
Dans mon cas, le problème était qu'un des fichiers CSS n'était pas disponible sur le serveur. respond.js traite la liste des fichiers CSS dans une fonction récursive. Avec le premier échec ajax (req.status !== 200 && req.status !== 304), il échoue silencieusement. Je devais corriger le mauvais chemin css pour le faire fonctionner.
Je me suis démené à propos de ce problème et j'ai finalement trouvé une solution. Mon problème était le CDN nous utilisons pour stocker tous nos médias.
J'ai déplacé respond.js et mes fichiers CSS sur le même domaine et tout a fonctionné comme prévu. J'espère que cela aide quelqu'un dans une situation similaire.
Respond.js ne fonctionne pas si vous affichez la page via le fichier: //
Utilisez votre dossier avec server alors cela fonctionnera, comme http: // localhost/yoursitename/ .
J'ai eu les liens suivants dans la condition d'Internet Explorer. Je devais prendre ces scripts hors de la condition.
<!--[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]-->
Remplacez par ceci:
<script type="text/javascript" src="~/Content/js/html5shiv.js"></script>
<script type="text/javascript" src="~/Content/js/respond.min.js"></script>
Il semble que la condition produise le même effet que si vous incluez ces scripts dans le pied de page au lieu de la tête.
J'ai eu le même problème, mais je l'ai résolu lorsque j'ai inclus Modernizr dans mon projet.
premièrement, les fichiers CSS pour les fichiers HTML et HTML doivent être hébergés dans le même domaine, ce qui fonctionne par la suite!
deuxièmement,
<base target="_blank" />
devrait être écrit comme
<base target="_blank"></base>
J'ai essayé toutes les méthodes mentionnées ci-dessus. nous pouvons voir la démo de ce qui suit http://scottjehl.github.io/Respond/test/test.html puis j'ai essayé de placer les fichiers CSS sur le même domaine que le HTML Si vous mettez le css dans le fichier html, cela ne fonctionnera pas non plus.
J'ai résolu ce problème en corrigeant l'ordre des lignes suivantes; ils devraient être dans cet ordre:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
J'avais la dernière ligne compatible X-UA et la disposition des colonnes ne fonctionnait pas, sauf sur mon local.
J'ai eu le même problème. Après avoir passé autant de temps, j'ai réalisé que cela est causé par une variable MOINS. J'ai remplacé une variable Bootstrap afin de désactiver les fonctionnalités réactives:
@grid-float-breakpoint: 0;
C'est la chose qui a cassé respond.js.
Puis je l'ai changé pour:
@grid-float-breakpoint: 0px;
et maintenant ça marche. J'espère que ça aide quelqu'un.
En utilisant polyfill.io aussi?
Au cas où cela aiderait quelqu'un d'autre, j'utilisais polyfill.io et le chargeais before respond.js. Je devais le déplacer après et respond.js a commencé à fonctionner, comme ceci:
<link rel='stylesheet' href='/css/screen.css' />
<script src='/js/vendor/respond.js'></script>
<script src='http://polyfill.io/'></script>
Internet Explorer 8 et les versions antérieures ne peuvent charger qu'un certain nombre de fichiers CSS et ne peuvent comporter qu'un nombre maximal de lignes. Si vous dépassez ces limites, le CSS ne se chargera pas. Essayez de combiner le contenu CSS dans un seul fichier.
Vous devez placer vos balises de stylesheet <link> dans le <head>. Même si tous les navigateurs vont charger et afficher les feuilles de style liées en dehors de <head>, elles sont (était) contre spec et respond.js ne les traite pas.