webentwicklung-frage-antwort-db.com.de

Respond.JS funktioniert nicht in IE 8

Aus irgendeinem Grund scheint es, dass JS nicht funktioniert. Ich verwende Medienabfragen in IE 8, um Hintergrundbilder für Monitore unterschiedlicher Größe zu ändern. In IE 8 gibt es keinen Hintergrund, nur eine durchgehende Farbe. 

Der Code sieht so aus: 

<!--[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]-->

Die Medienabfrage sieht folgendermaßen aus: 

@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;
 }
}

Gibt es einen Grund, warum der obige Code in IE 8 nicht funktioniert? Gibt es eine andere JS, die ich verwenden sollte, damit IE 8 Media Queries funktioniert? 

Hinweis: Es scheint, dass das HTML5-Shiv funktioniert. Ich teste auf einem Live-Webserver. 

35
L84

Gleiches Problem. Ich habe herausgefunden, dass es mein Problem mit der Ladereihenfolge ist, weil ich CSS-Inline-Code schreibe und dann das Antwort-Skript js anrufe, so dass es aussieht 

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

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

Es sollte sein 

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

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

IMMER verknüpfen Sie Stylesheets oder schreiben Sie Inline-CSS vor js-Skripts!

90
Wen

Dies kann daran liegen, dass Sie Ihr CSS auf einer Subdomain oder CDN hosten.

Respond.js fordert eine makellose Kopie Ihres CSS über Ajax an. Wenn Sie Ihre Stylesheets auf einem CDN (oder einer Unterdomäne) hosten, müssen Sie eine Proxy-Seite hochladen, um die Kommunikation zwischen Domänen zu ermöglichen.

13
R Burchall

Ich konnte diese Arbeit machen, aber ich musste das Skript im body-Tag einfügen. 

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

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

Ich bin nicht sicher, warum das funktioniert, aber es hat mein Problem gelöst.

Bitte beachten Sie: Siehe Wens Antwort , da das respons.js nach Ihrem CSS kommen sollte. In meiner Situation war es nach der CSS, aber aus head würde es aus irgendeinem Grund nicht funktionieren. Beim Einfügen in die body funktionierte es wie vorgesehen. 

8
L84

Respond.JS, das ist das, was Bootstrap zum Aktivieren von Medienabfragen in Internet Explorer 8 verwendet, verarbeitet @import-Dateien nicht .

Aus dem GitHub-Repository: Respond.js analysiert über @import referenziertes CSS nicht und funktioniert auch nicht mit Medienabfragen innerhalb von Stilelementen, da diese Stile für die Analyse nicht erneut angefordert werden können.

Ich musste die bootstrap.css und alle CSS laden, die Medienabfragen im Header enthalten

<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' />

Die folgende Importmethode funktioniert NICHT:

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

Stellen Sie sicher, dass Sie einen localhost oder einen Webserver verwenden. "Aufgrund von Sicherheitsbeschränkungen können einige Browser dieses Skript möglicherweise nicht für file: // urls verwenden (da es XMLHttpRequest verwendet). Führen Sie es auf einem Webserver aus.

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

3
Peter_B.

Die bewährte Methode besteht darin, html5shiv.js und respons.js einzuschließen und sicherzustellen, dass sie in einem localhost ausgeführt werden.

<!--[if lt IE 9]>

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

<![endif]--> 

Ich hoffe es hilft dir.

2
Venu immadi

Wenn Sie versuchen, Internet Explorer 11 zu verwenden, um frühere Versionen von Internet Explorer zu emulieren, seien Sie vorsichtig.

Internet Explorer 10 und höher unterstützen keine IE bedingten Kommentare. Die erste Version von Internet Explorer 11 hat sie nicht unterstützt, selbst wenn sie als ältere Version im Emulationsmodus ausgeführt wurde. Siehe Bedingte Kommentare werden nicht mehr unterstützt (MSDN).

Sie sollten bestätigen, dass Sie mindestens das erste Update von Internet Explorer 11 installiert haben. Wenn Sie sich nicht sicher sind, greifen Sie einfach zum neuesten Update.

Siehe den Bugfix in Bedingte Kommentare funktionieren nicht, wenn Dokumentmodi über F12 Developer Tools emuliert werden

Eine Diskussion in der Stack Overflow-Frage Warum werden in Internet Explorer 11 keine bedingten Kommentare berücksichtigt, auch wenn der Internet Explorer 8-Dokumentmodus emuliert wird?.

2
jeff-h

Ich wollte nur hinzufügen, dass die example.html von github für IE8 unter XP nicht sofort funktioniert!

Ich habe festgestellt, dass das Github-Beispiel beim Kopieren auf meinen Server nicht funktioniert hat. Die Lösung, die ich gefunden habe, war, dass das Beispiel beim Testen mit IE8 von XP 2 Änderungen erfordert!

  • Laden Sie herunter und extrahieren Sie den Inhalt von https://github.com/scottjehl/Respond

  • Öffnen Sie example.html im domänenübergreifenden Ordner. Ersetzen Sie "rawgithub.com" durch "Rawgit.com" (IE8/xp mag die Weiterleitung nicht, wenn Sie die Dateien "css " Einfügen.)

  • Ändern Sie "https" in "http", da das von ihnen verwendete CDN SNI verwendet, das in XP nicht Unterstützt wird. Wenn Sie also Benutzer von XP unterstützen möchten, benötigen Sie . ! (oder weniger Sie geben viel Geld aus, um eine dedizierte IP auf Ihrem CDN zu erhalten)

Sobald dies geändert wurde, funktioniert alles gut mit dem Beispiel :-) Hoffe, das hilft jemandem :-) Working example.html Code unten:

  <!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
Liam Wheldon

Dieser Fehler tritt auf, weil das Skript "response.min.js" Ajax oder etwas Ähnliches verwendet. Sie müssen Ihr Projekt auf einem lokalen oder Remote-Server wie WAMP oder XAMPP platzieren.

1
Genaro

In meinem Fall war das Problem, dass eine der CSS-Dateien auf dem Server nicht verfügbar war. respons.js verarbeitet die Liste der CSS-Dateien in einer rekursiven Funktion. Mit dem ersten Ajax-Fehler (req.status !== 200 && req.status !== 304) fällt es unbemerkt aus. Ich musste den falschen CSS-Pfad reparieren, damit er funktioniert. 

0
krishnakumarp

Ich habe mir die Haare über dieses Problem gezogen und endlich eine Lösung gefunden. Mein Problem war das CDN , das wir verwenden, um alle unsere Medien zu speichern. 

Ich habe respond.js und meine CSS-Dateien auf dieselbe Domain verschoben und alles funktionierte wie erwartet. Ich hoffe, das hilft jemandem in einer ähnlichen Situation. 

0
Joshua Maynard

Respond.js funktioniert nicht, wenn Sie die Seite über file anzeigen: //
Verwenden Sie Ihren Ordner mit dem Server, dann funktioniert es wie http: // localhost/yoursitename/ .

0
Selvanayagam M

Ich hatte die folgenden Links in der Internet Explorer-Bedingung. Ich musste diese Skripte aus dem Zustand herausnehmen.

<!--[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]-->

Ersetzen Sie mit diesem:

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

Es sieht so aus, als würde die Bedingung den gleichen Effekt haben wie wenn Sie diese Skripte in die Fußzeile anstelle des Kopfes einfügen.

0
Martin Brabec

Ich hatte das gleiche Problem, aber ich habe es gelöst, als ich Modernizr in mein Projekt aufgenommen habe. 

0
Rich

erstens sollten die CSS für die HTML- und die HTML-Dateien in derselben Domäne gehostet werden, was letztendlich funktioniert! 

zweitens,

<base target="_blank" />

sollte wie geschrieben werden 

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

Ich habe alle oben genannten Methoden ausprobiert. Wir können die Demo des folgenden http://scottjehl.github.io/Respond/test/test.html .__ sehen. Dann habe ich versucht, die CSS-Dateien in dieselbe Domäne der HTML-Datei zu kopieren Datei, dann fand es erfolgreich. Wenn Sie die CSS in die HTML-Datei legen, konnte es auch nicht bearbeitet werden.

0
pigfly

Ich habe dieses Problem behoben, indem ich die Reihenfolge der folgenden Zeilen korrigierte. Sie sollten in dieser Reihenfolge sein:

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

Ich hatte die X-UA-kompatible Zeile zuletzt und die Spaltenlayouts funktionierten nicht, außer auf meiner lokalen.

0
Katherine

Ich hatte das gleiche Problem. Nachdem ich so viel Zeit verbracht hatte, wurde mir klar, dass dies durch eine LESS-Variable verursacht wird. Ich überschreibe eine Bootstrap-Variable, um die ansprechenden Funktionen zu deaktivieren: 

@grid-float-breakpoint: 0;

Dies war das, was respons.js brach.

Dann habe ich es geändert:

@grid-float-breakpoint: 0px;

und jetzt funktioniert es. Ich hoffe das es jemandem hilft.

0
Orkun Tuzel

Verwenden Sie auch polyfill.io?

Für den Fall, dass dies allen anderen hilft, habe ich polyfill.io verwendet und es vor respons.js geladen. Ich musste es danach verschieben, und respons.js fing an, so zu arbeiten:

<link rel='stylesheet' href='/css/screen.css' />
<script src='/js/vendor/respond.js'></script>
<script src='http://polyfill.io/'></script>
0
tprsn

Internet Explorer 8 und darunter kann nur eine bestimmte Anzahl von CSS-Dateien laden und nur eine bestimmte maximale Zeilenanzahl haben. Wenn Sie diese Grenzen überschreiten, wird das CSS nicht geladen. Versuchen Sie, CSS-Inhalte in einer einzigen Datei zusammenzufassen. 

0
user1491819

Sie müssen die <link>-Tags im Stylesheet innerhalb von <head> platzieren. Obwohl alle Browser Stylesheets laden und rendern, die außerhalb von <head> verlinkt sind, ist (war) dies gegen Spezifikation und respond.js verarbeitet sie nicht.

0
Charlie