Supporto IE8 per CSS Media Query

IE8 non supporta la seguente query multimediale CSS:

@import url("desktop.css") screen and (min-width: 768px);

In caso contrario, qual è il modo alternativo di scrivere? Lo stesso funziona bene in Firefox.

Problemi con il codice qui sotto?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

Le versioni di Internet Explorer precedenti a IE9 non supportano le query multimediali .

Se stai cercando un modo per degradare il design per gli utenti di IE8, potresti trovare utili i commenti condizionali di IE. Usando questo, puoi specificare un foglio di stile specifico per IE 8/7/6 che sovrascrive le regole precedenti.

Per esempio:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

Ciò non consentirà un design reattivo in IE8, ma potrebbe essere una soluzione più semplice e più accessibile rispetto all'utilizzo di un plug-in JS.

css3-mediaqueries-js è probabilmente quello che stai cercando: questo script emula le query multimediali. Tuttavia (dal sito dello script) "non funziona con i @importfogli di stile ed (che non dovresti usare comunque per motivi di prestazioni). Inoltre non ascolterà l'attributo media degli elementi <link>e <style>".

Allo stesso modo hai il Respond.js più semplice , che abilita solo min-widthe max-widthmedia query.

La migliore soluzione che ho trovato è Respond.js soprattutto se la tua preoccupazione principale è assicurarsi che il tuo design reattivo funzioni in IE8. È abbastanza leggero a 1kb quando min / gzip e puoi assicurarti che solo i client IE8 lo caricino:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

È anche il metodo consigliato se si utilizza bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9

IE8 (e versioni precedenti) e Firefox precedenti alla 3.5 non supportano la media query. Safari 3.2 lo supporta parzialmente.

Esistono alcune soluzioni alternative che utilizzano JavaScript per aggiungere il supporto per le query multimediali a questi browser. Prova questi:

Plug-in jQuery Media Queries (si occupa solo della larghezza massima / minima)

css3-mediaqueries-js - una libreria che mira ad aggiungere il supporto per le query multimediali ai browser non supportati

Tratto dalla pagina del progetto css3mediaqueries.js.

Nota: non funziona su fogli di stile @ import (che non dovresti usare comunque per motivi di prestazioni). Inoltre, non ascolterà l'attributo multimediale degli elementi <link>e <style>.

Un modo semplice di usare css3-mediaqueries-js è includere quanto segue prima del tag body di chiusura:

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script 
   src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->

Risposta modificata: IE comprende solo lo schermo e la stampa come supporti di importazione. Tutti gli altri CSS forniti insieme all'istruzione import fanno sì che IE8 ignori l'istruzione import. Il browser Geco come Safari o Mozilla non ha avuto questo problema.

Le query multimediali non sono affatto supportate in IE8 e versioni successive.

Una soluzione alternativa basata su Javascript

Per aggiungere supporto per IE8, è possibile utilizzare una delle diverse soluzioni JS. Ad esempio, Rispondi può essere aggiunto per aggiungere il supporto per le query multimediali per IE8 solo con il seguente codice:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries è un'altra libreria che fa la stessa cosa. Il codice per aggiungere quella libreria al tuo HTML sarebbe identico:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

L'alternativa

Se non ti piace una soluzione basata su JS, dovresti anche considerare l'aggiunta di un foglio di stile solo per IE <9 in cui regoli il tuo stile specifico per IE <9. Per questo, è necessario aggiungere il seguente codice HTML al codice:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Nota :

Tecnicamente è un'altra alternativa: utilizzare gli hack CSS per indirizzare IE <9. Ha lo stesso impatto di un foglio di stile IE <9, ma per questo non è necessario un foglio di stile separato. Non raccomando questa opzione, poiché producono codice CSS non valido (che è solo uno dei diversi motivi per cui l'uso di hacker CSS è generalmente disapprovato oggi).

Prima di Internet Explorer 8 non c'erano supporti per le query multimediali. Ma a seconda del caso, puoi provare a utilizzare i commenti condizionali per indirizzare solo Internet Explorer 8 e versioni precedenti. Devi solo usare una corretta architettura di file CSS.

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

Ho usato @media \0screen {}e funziona bene per me in REAL IE8.

IE non ha aggiunto il supporto per le query multimediali fino a IE9. Quindi con IE8 sei sfortunato.