Respond.JS funktioniert nicht im IE 8

Aus irgendeinem Grund scheint es, dass reagieren JS nicht funktioniert. Ich bin mit der Verwendung von Media-Queries in IE 8 ändern, hintergrund Bilder für verschiedene Größe Bildschirme. Im IE 8 gibt es keinen hintergrund, nur eine Feste 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]-->

Den Media-Query sieht wie folgt 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, den oben genannten code funktioniert nicht im IE 8? Ist da ein JS, dass ich sollte versuchen, zu verwenden, um IE 8 Media Queries Arbeiten?

Hinweis: Es scheint, dass die html5-shiv funktioniert. Ich bin den Test auf einem live-web-server.

Kommentar zu dem Problem

Ich habe das gleiche problem, ich habe versucht, zwei Seiten testen, man ist verbunden durch den respondjs repo: chrisjacob.github.com/Respond und scottjehl.github.com/Respond/test/test.html . Beide Seiten testen nicht in IE8, scheint es nicht das funktioniert?? (Die Jungs, die startete die "mobile-first-Mode" nicht glaube.) Kommentarautor: Amida

ok vergiss was ich sagte, es funktioniert tatsächlich. Das problem wurde von einer option für die Sicherheit des IE8, der aktiviert wurde, auf meiner dev-computer. Ich denke, dass es verhindert, dass js Ausführung. Vielleicht haben Sie das auch. Es ist in Extras, internet-Optionen, Sicherheit, security level (ich ungeprüft "geschützten Modus aktivieren"). Dies zeigt auch ein sehr einfaches problem, mit dieser Technik, wenn js nicht verfügbar ist. Kommentarautor: Amida

@Lynda .. haben Sie erkannt ? .. Haben Sie sich Ihre eigene Lösung ? Kommentarautor: matzone

@matzone - Siehe meine Antwort, die ich gerade gepostet, dass mein problem gelöst. Kommentarautor: L84

@Amida ich hatte das gleiche problem, und deaktiviert die Sicherheits-Optionen, und es begann zu arbeiten. Obwohl, was ist der Punkt bei der Verwendung der Skript, wenn Sie haben, um die Sicherheitsfunktion zu deaktivieren. Kommentarautor: Xarcell

InformationsquelleAutor der Frage L84 | 2013-02-28

90

Gleiche problem. Ich fand heraus, es ist meine Ladereihenfolge problem, denn ich Schreibe inline-CSS und dann rufe ich reagieren js-script, so wie es aussieht

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

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

Sollte es

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

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

IMMER link stylesheets oder schreiben Sie inline-CSS vor js scripts!

InformationsquelleAutor der Antwort Wen
13

Könnte es sein, denn du bist das hosting CSS auf subdomain oder CDN.

Respond.js funktioniert durch das anfordern einer unberührten Kopie von CSS über Ajax, so dass, wenn Sie hosten Ihre stylesheets auf einem CDN (oder subdomain), müssen Sie zum hochladen einer proxy-Seite, um ermöglichen cross-domain-Kommunikation.

InformationsquelleAutor der Antwort R Burchall
8

War ich in der Lage, diese Arbeit zu machen, aber ich hatte zum einfügen des Skripts in der body tag.
```
<head>
    
</head>
<body> 
    

    
</body>
```
Ich bin nicht sicher, warum dies funktioniert, aber es löste mein problem.

Bitte beachten Sie: Sehen Wen ' s Antwort als die respond.js sollte nach Ihrem CSS. In meiner situation war es nach der CSS, aber es würde nicht funktionieren in der head aus irgendeinem Grund. Beim einlegen in den body es funktionierte wie vorgesehen.

InformationsquelleAutor der Antwort L84
7

Respond.JS, was Bootstrap verwendet, um zu ermöglichen, media queries im Internet Explorer 8, nicht Prozess @import - Dateien.

Aus dem GitHub-repository: Respond.js analysieren nicht CSS verwiesen, die über @import -, noch funktioniert es mit media queries innerhalb von style-Elementen, wie diese Stile können nicht erneut beantragt für die Analyse.

Hatte ich zum laden der bootstrap.css und alle CSS, media queries enthält in der Kopfzeile
```
<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' />
```
Folgende import-Methode funktioniert NICHT:
```
@import "bootstrap.min.css";
@import "media.css";
```
InformationsquelleAutor der Antwort hsobhy
3

Stellen Sie sicher, dass Sie ein localhost oder Webserver. "Aufgrund von Sicherheitsbeschränkungen, einige Browser können nicht zulassen, dass dieses Skript auf file://urls (weil es nutzt XMLHttpRequest). Führen Sie es auf einem web-server."

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

InformationsquelleAutor der Antwort Peter_B.
2

Die beste Vorgehensweise ist, gehören html5shiv.js und respond.js und stellen Sie sicher, dass Sie in einem localhost, so wird es funktionieren.
```
 
```
Ich hoffe es wird Euch helfen.

InformationsquelleAutor der Antwort Venu immadi
2

Wenn Sie versuchen, zu verwenden Internet Explorer 11 zu emulieren früheren Versionen von Internet Explorer, vorsichtig sein.

Internet Explorer 10 und später nicht unterstützen IE die bedingten Kommentare. Die erste Version von Internet Explorer 11 nicht unterstützen, auch beim laufen wie eine frühere version im emulation Modus. Sehen Bedingte Kommentare werden nicht mehr unterstützt (MSDN).

Sollten Sie bestätigen, dass Sie mindestens das erste update von Internet Explorer 11. Wenn Sie Zweifel haben, nehmen Sie einfach das Letzte.

Finden Sie in der bug-fix in Conditional comments funktionieren nicht, wenn die Emulation Dokument-Modi via F12 Developer Tools

Und eine Diskussion auf Stack Overflow Frage Warum nicht Internet Explorer 11 zu Ehren conditional comments, auch wenn die Emulation von Internet Explorer 8 Dokument-Modus?.

InformationsquelleAutor der Antwort jeff-h
1

Dieser Fehler tritt auf, weil das Skript "respond.min.js" verwendet Ajax oder etwas ähnliches. Sie müssen Ihr Projekt auf einem lokalen oder einem remote-server wie WAMP oder XAMPP.

InformationsquelleAutor der Antwort Genaro

Ich wollte nur hinzufügen, dass das example.html von github funktioniert nicht out of the box für den IE8 auf XP!

Fand ich, dass die github-Beispiel hat nicht funktioniert, als kopiert zu meinem server. Die Lösung, die ich fand, war, dass das Beispiel, wenn getestet, mit IE8 von XP braucht 2 verpasst!

Herunterladen und extrahieren Sie die Inhalte von https://github.com/scottjehl/Respond
Öffnen example.html in der cross-domain " Ersetzen "rawgithub.com" mit
"rawgit.com" (IE8/xp nicht wie das umleiten, wenn einschließlich des css
Dateien)
Ändern "https" in "http" als die CDN Sie verwenden verwendet SNI was nicht
unterstützt XP, also, wenn Sie wollen, um Unterstützung für XP-Nutzer, dann brauchen Sie
gerecht zu werden! (oder weniger, Sie verbringen eine Menge Geld, um ein
dedizierte IP auf Ihrem CDN)

Einmal wurde dies geändert, alles funktioniert gut mit dem Beispiel 🙂 Hoffe, das hilft jemandem 🙂 Arbeiten example.html code unter:

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

InformationsquelleAutor der Antwort Liam Wheldon

0

Ich dieses problem gelöst, indem korrigiert wird, wie die Reihenfolge der folgenden Zeilen; 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">
```
Hatte ich die X-UA-Compatible letzten Zeile und die Spalte layouts hat nicht funktioniert, außer auf meinem lokalen.

InformationsquelleAutor der Antwort Katherine
0

Müssen Sie Ihre stylesheet <link> tags innerhalb der <head>. Obwohl alle Browser laden und Rendern stylesheets verknüpft, die außerhalb des <head> es ist (war) gegen spec und respond.js nicht verarbeiten.

InformationsquelleAutor der Antwort Charlie
0

Mit polyfill.io auch?

In diesem Fall hilft jemand anderes, ich war mit polyfill.io und war laden vor respond.js. Ich brauchte, um es zu bewegen und nach respond.js zu arbeiten begonnen, etwa so:
```
<link rel='stylesheet' href='/css/screen.css' />
<script src='/js/vendor/respond.js'></script>
<script src='http://polyfill.io/'></script>
```
InformationsquelleAutor der Antwort tprsn
0

Ich hatte das gleiche Problem, aber ich habe es gelöst, wenn ich Modernizr in meinem Projekt.

InformationsquelleAutor der Antwort Rich

Ich hatte den folgenden links im Internet Explorer-Zustand. Ich musste diese Skripte aus der Bedingung.

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

Sieht es aus wie die Erkrankung die gleiche Wirkung, wie wenn Sie diese Scripte in den footer statt in den Kopf.

InformationsquelleAutor der Antwort Martin Brabec

0

Ich habe mein Haar ziehen zu diesem Problem und fand schließlich eine Lösung. Mein Problem war die CDN wir speichern alle unsere Medien.

Zog ich respond.js und meine CSS-Dateien, die alle auf der gleichen domain, und alles funktionierte wie erwartet. Ich hoffe, das hilft jemand in einer ähnlichen Zwangslage.

InformationsquelleAutor der Antwort Joshua Maynard
0

Internet Explorer 8 und darunter kann nur laden Sie eine bestimmte Anzahl von CSS-Dateien, und Sie können nur einen gewissen maximalen Anzahl von Linien. Wenn Sie über diese Grenzen, werden die CSS nicht geladen wird. Versuchen Sie, das kombinieren der CSS-Inhalte in einer einzigen Datei.

InformationsquelleAutor der Antwort user1491819
0

Erstens Die css-Datei für die html und die html-Dateien gehostet, die in der gleichen Domäne,die schließlich funktioniert!

zweitens,
```
<base target="_blank" />
```
sollten so geschrieben werden, wie
```
<base target="_blank"></base>
```
Ich habe versucht, alle Methoden, die oben erwähnt werden. wir können sehen, die demo der folgenden
http://scottjehl.github.io/Respond/test/test.html
dann habe ich die css-Dateien in derselben Domäne wie der html-Datei,dann festgestellt, dass es gelingt.Wenn du die css in die html-Datei,es konnte nicht gearbeitet werden.

InformationsquelleAutor der Antwort pigfly
0

Ich hatte das gleiche problem. Nach so viel Zeit, ich erkannte, dass dies ist verursacht durch eine WENIGER variable. Ich überschrieb eine Bootstrap-variable, um zu deaktivieren ansprechende features:

@grid-float-breakpoint: 0;

Das war die Sache, dass brach respond.js.

Dann habe ich es geändert:

@grid-float-breakpoint: 0px;

und jetzt funktioniert es. Ich hoffe, dass es jemand hilft.

InformationsquelleAutor der Antwort Orkun Tuzel
0

In meinem Fall, das Problem war einer der css-Dateien nicht verfügbar war auf dem server. respond.js Prozesse die Liste der css-Datei in eine rekursive Funktion. Mit der ersten ajax-Fehler (req.status !== 200 && req.status !== 304), es schlägt im hintergrund fehl. Ich fix hatte die falsche css-Pfad, um es arbeiten.

InformationsquelleAutor der Antwort krishnakumarp
0

Respond.js funktioniert nicht, wenn Sie die Seite anzeigen, die über file://

Verwenden Sie Ihre Ordner mit dem server, dann wird es funktionieren, wie http://localhost/yoursitename/.

InformationsquelleAutor der Antwort Selvanayagam M
-4

Ich hatte das gleiche problem und es behoben durch das entfernen der <base> tag in der <head>. Ich fand die Lösung in Stack Overflow Frage Respond.js funktioniert nicht im Internet Explorer 7, aber H5BP-Beispiel funktioniert. Es kann verursacht werden durch:
```
<base />
```
und nicht
```
<base></base>
```
Internet Explorer 6 - 8 (ich bin nicht sicher, über 9) werfen Sie einen wackeligen, wenn es kein schließendes tag. Dann werden alle anderen head - tags werden Kind-Elemente von <base>. Und alles wird kaputt :/.

Ich hoffe, das hilft!

InformationsquelleAutor der Antwort Just Plain High

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.