Respond.JS non funziona in IE 8

Per qualche ragione sembra che la risposta JS non funzioni. Sto usando Media Queries in IE 8 per cambiare le immagini di sfondo per vari monitor di dimensioni. In IE 8 non c’è uno sfondo, solo un colore solido.

Il codice si presenta così:

 

La Media Query ha questo aspetto:

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

C’è una ragione per cui il codice sopra non funzionerebbe in IE 8? C’è un altro JS che dovrei provare ad usare per far funzionare IE 8 Media Queries?

Nota: sembra che html5-shiv funzioni. Sto testando su un server web live.

Stesso problema. Ho scoperto che è il mio problema con la sequenza di caricamento, perché scrivo CSS in linea e poi chiamo lo script di risposta js, quindi sembra

Dovrebbe essere

Collega SEMPRE fogli di stile o scrivi CSS inline prima degli script js!

Potrebbe essere perché stai ospitando il tuo CSS su un sottodominio o CDN .

Respond.js funziona richiedendo una copia incontaminata del tuo CSS tramite Ajax , quindi se si ospitano i fogli di stile su un CDN (o un sottodominio), sarà necessario caricare una pagina proxy per abilitare le comunicazioni tra domini.

Sono stato in grado di farlo funzionare, ma ho dovuto inserire lo script nel tag del body .

        

Non sono sicuro del motivo per cui funziona, ma ha risolto il mio problema.

Nota: vedi la risposta di Wen poiché respond.js dovrebbe venire dopo il tuo CSS. Nella mia situazione era dopo il CSS, ma non avrebbe funzionato nella head per qualche motivo. Quando inserito nel body ha funzionato come previsto.

Respond.JS, che viene utilizzato da Bootstrap per abilitare le query multimediali in Internet Explorer 8, non @import file @import .

Dal repository GitHub: Respond.js non analizza i CSS a cui fa riferimento tramite @import, né funziona con le query multimediali all’interno degli elementi di stile, poiché tali stili non possono essere richiesti nuovamente per l’analisi.

Ho dovuto caricare il bootstrap.css e qualsiasi CSS che contenga query multimediali nell’intestazione

   

Il seguente metodo di importazione NON funziona:

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

Assicurati di utilizzare un localhost o un server web. “A causa di restrizioni di sicurezza, alcuni browser potrebbero non consentire a questo script di funzionare su file: // urls (perché utilizza XMLHttpRequest ). Eseguirlo su un server web.”

Fonte: https://github.com/scottjehl/Rispondi

La procedura migliore è includere html5shiv.js e respond.js e assicurarsi di eseguire in un localhost, quindi funzionerà correttamente.

  

Spero ti possa aiutare.

Se stai cercando di utilizzare Internet Explorer 11 per emulare versioni precedenti di Internet Explorer, fai attenzione.

Internet Explorer 10 e versioni successive non supportano i commenti condizionali di IE . La prima versione di Internet Explorer 11 non li supportava nemmeno quando era in esecuzione come una versione precedente in modalità emulazione. Vedi I commenti condizionali non sono più supportati (MSDN).

Devi confermare di avere almeno il primo aggiornamento di Internet Explorer 11. In caso di dubbio, prendi l’ultimo.

Vedere la correzione di bug nei commenti condizionali non funzionano quando si emulano le modalità del documento tramite gli Strumenti di sviluppo F12

E una discussione nella domanda Stack Overflow Perché Internet Explorer 11 non onora i commenti condizionali anche quando si emula la modalità documento di Internet Explorer 8? .

Questo errore si verifica perché lo script “respond.min.js” utilizza Ajax o qualcosa di simile. È necessario posizionare il progetto su un server locale o remoto come WAMP o XAMPP .

Volevo solo aggiungere che l’esempio.html di github non funzionasse immediatamente con IE8 su XP!

Ho trovato che l’esempio github non funzionava quando copiato sul mio server. La soluzione che ho trovato è che l’esempio quando viene testato con IE8 da XP ha bisogno di 2 modifiche!

  • Downlaod ed estrai il contenuto di https://github.com/scottjehl/Respond

  • Apri example.html nella cartella tra domini Sostituisci “rawgithub.com” con “rawgit.com” (IE8 / xp non ama il reindirizzamento quando include i file css)

  • Cambia “https” in “http” poiché il CDN che usano utilizza SNI che non è supportato in XP, quindi se vuoi supportare gli utenti di XP, dovrai provvedere a questo! (o meno spendi un sacco di soldi per ottenere un IP dedicato sul tuo CDN)

Una volta che questo è stato modificato, tutto funziona bene con l’esempio 🙂 Spero che questo aiuti qualcuno 🙂 Working example.html codice qui sotto:

        Respond JS Test Page         

This is a visual test file for cross-domain proxy.

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.

Media-attributes are working too! This should be visible above 600px.

Ho risolto questo problema correggendo l’ordine delle seguenti righe; dovrebbero essere in questo ordine:

    

Ho avuto la linea X-UA-Compatible per ultima e il layout della colonna non ha funzionato, tranne che per il mio locale.

Devi inserire i tag foglio di stile all’interno di . Anche se tutti i browser caricheranno e renderizzeranno i fogli di stile collegati all’esterno di , è (era) contro specifiche e respond.js non li elabora.

Utilizzando polyfill.io anche?

Nel caso in cui questo aiuti qualcun altro, stavo usando polyfill.io e lo stavo caricando prima di respond.js. Avevo bisogno di spostarlo dopo e respond.js ha iniziato a funzionare, in questo modo:

    

Ho avuto lo stesso problema, ma l’ho risolto quando ho incluso Modernizr nel mio progetto.

Ho avuto i seguenti collegamenti nella condizione di Internet Explorer. Ho dovuto togliere quegli script dalle condizioni.

  

Sostituisci con questo:

   

Sembra che le condizioni abbiano lo stesso effetto, come se si includessero questi script nel footer anziché nella testa.

Ho tirato fuori i miei capelli su questo problema e finalmente ho trovato una soluzione. Il mio problema era la CDN che usiamo per memorizzare tutti i nostri media.

Ho spostato respond.js e i miei file CSS tutti nello stesso dominio e tutto ha funzionato come previsto. Spero che questo aiuti qualcuno in una situazione simile.

Internet Explorer 8 e versioni successive possono caricare solo un certo numero di file CSS e possono avere solo un determinato numero massimo di righe. Se superi questi limiti, il CSS non verrà caricato. Prova a combinare il contenuto CSS in un singolo file.

in primo luogo, il css per i file html e html deve essere ospitato nello stesso dominio, che alla fine funziona!

in secondo luogo,

  

dovrebbe essere scritto come

  

Ho provato tutti i metodi sopra menzionati. potremmo vedere la demo del seguente http://scottjehl.github.io/Respond/test/test.html quindi ho provato a mettere i file css sullo stesso dominio del file html, poi ho trovato che ha avuto successo.Se lo hai messo il css nel file html, non può essere nemmeno lavorato.

Ho avuto lo stesso problema. Dopo aver passato così tanto tempo, mi sono reso conto che questo è causato da una variabile MENO. Ho scavalcato una variabile Bootstrap per distriggersre le funzionalità di risposta:

@grid-float-breakpoint: 0;

Questa è stata la cosa che ha risposto respond.js.

Poi l’ho cambiato in:

@grid-float-breakpoint: 0px;

e ora funziona. Spero che aiuti qualcuno.

Nel mio caso, il problema era che uno dei file css non era disponibile sul server. respond.js elabora la lista del file css in una funzione ricorsiva. Con il primo errore ajax (req.status !== 200 && req.status !== 304) , fallisce silenziosamente. Ho dovuto correggere il percorso css sbagliato per farlo funzionare.

Respond.js non funziona se si visualizza la pagina tramite file: //
Usa la tua cartella con il server allora funzionerà, come http: // localhost / yoursitename / .

Ho avuto lo stesso problema e l’ho risolto rimuovendo il tag nel . Ho trovato la soluzione nella domanda Stack Overflow Respond.js non funziona in Internet Explorer 7, ma l’esempio H5BP funziona . Può essere causato da:

  

e non

  

Internet Explorer 6 – 8 (non sono sicuro di 9) getta un traballante quando non c’è un tag di chiusura. Quindi tutti gli altri tag head diventano elementi secondari di . E tutto diventa rotto: /.

Spero che aiuti!