27 votes

Respond.JS ne fonctionne pas dans IE 8

Pour une raison quelconque, il semble que répondre JS ne fonctionne pas. Je suis en utilisant les Media Queries dans IE 8 pour changer les images de fond pour les différentes tailles de moniteurs. Dans IE 8 il n'y a pas de fond, juste 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 de Mé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;
 }
}

Est-il une raison pour laquelle le code ci-dessus ne fonctionnerait pas sous IE 8? Est-il une autre JS que je devrais essayer de l'utiliser pour faire IE 8 Requêtes de Média Travail?

Note: Il semble que le html5-shiv fonctionne. Je suis en train de tester sur un serveur web.

81voto

Wen Points 1463

Même problème. J'ai découvert que c'était mon problème de séquence de chargement, car j'écris CSS en ligne, puis j'appelle le script respond js, il ressemble donc à

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

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

Ça devrait être

<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 du CSS en ligne avant les scripts js!

12voto

R Burchall Points 41

Peut-être parce que vous hébergez votre CSS sur un sous-domaine ou un 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 activer la communication entre domaines.

8voto

Lynda Points 10527

J'ai pu faire ce travail mais j'ai dû 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.

Veuillez noter: Voir la réponse de Wen car le respond.js devrait venir après votre CSS. Dans ma situation, c'était après le CSS mais ne fonctionnerait pas dans le head pour une raison quelconque. Lorsqu'il a été inséré dans le body il a fonctionné comme prévu.

7voto

hsobhy Points 455

Respond.JS qui est ce Bootstrap utilise pour activer les requêtes de média dans IE8, n'a pas de processus d' @import fichiers.

Depuis le dépôt GitHub: Répondre.js ne pas analyser les CSS référencé via @import, ni le fait de travailler avec les requêtes des médias au sein des éléments de style, que ces styles ne peut pas être re-requis pour l'analyse.

J'ai eu à charge de l'amorçage.css et CSS qui contient les requêtes des médias 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 suite de la méthode d'import ne fonctionne PAS:

@import "bootstrap.min.css";
@import "media.css";

3voto

Peter_B. Points 31

Assurez-vous que vous utilisez un serveur local ou un serveur Web. "En raison de restrictions de sécurité, certains navigateurs peuvent ne pas autoriser ce script à fonctionner sur file: // urls (car il utilise xmlHttpRequest). Exécutez-le sur un serveur Web." source: https://github.com/scottjehl/Respond

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X