2013-05-06 5 views
13

Ho una pagina che utilizza i CSS non esterna nei <style> tag, e in quei <style> tag è la seguente media query:IE9 carichi sbagliata informazioni query di carico con i CSS non esterno

@media screen and (max-width:768px){ 
/* CSS */ 
} 

Tutto sta funzionando bene in Firefox, il CSS per 768px larghezza e sotto rende solo quando dovrebbe. Tuttavia, in IE9, il CSS all'interno di questa query multimediale viene eseguito il rendering a prescindere dalla dimensione.

Dopo aver caricato, tuttavia, se cambio le dimensioni del browser, rerende come versione desktop, come dovrebbe. Quindi, in pratica, il foglio di stile IE9 non esterno sembra rendere tutti i CSS, sia che si tratti di una query multimediale per la quale non corrisponde, ma che restituisce il CSS corretto se il browser viene ridimensionato, anche da un pixel.

Qualcuno sa cosa sta succedendo esattamente con questo, o se c'è una soluzione rapida? Le uniche soluzioni che sono stato in grado di pensare avrebbero risolto il problema riordinando il mio CSS e aggiungendo una nuova query multimediale, che vorrei evitare per la facilità di aggiornamento del codice.

+0

Quel codice dovrebbe funzionare bene, quindi potrebbe esserci qualcos'altro che interferisce. Puoi pubblicare un link per noi per guardare o pubblicare un codice di prova che dimostri il problema? –

+0

@ ralph.m Attualmente sto cercando un modo per pubblicare codice attivo online che imita il problema. Le query multimediali sembrano funzionare bene con IE9 in jsfiddle, ma non so che jsfiddle compili il codice allo stesso modo. Sembra essere rigorosamente IE9 con le query multimediali in fogli di stile non esterni. Il browser li rende correttamente non appena li ridimensiono leggermente, ma in modo originale rende tutti i CSS all'interno dei tag '