css funzione Calc bug in IE

Come @ Joe ha sottolineato nella sua risposta, il problema qui con IE non ha nulla a che fare con le media query.

Ho quindi aggiornato il vecchio titolo: ("media query GLITCH in IE") con quello corrente. (grazie anche ad alcuni meta advice)

Giusto per essere sicuro, ho creato un nuovo FIDDLE contenente solo la funzione calc, e basso ed ecco - vedo lo stesso (cattivo) comportamento in IE come ho fatto nel mio violino originale con le domande dei media.

Inoltre, una interessante osservazione che ho notato è che questo accade solo quando uso la divisione nell'operazione calc, ma se io uso qualcosa di più semplice come calc(100% - x px) - IE gestisce ok.

Sto usando media queries per giustificare un elenco delle caselle.

Fondamentalmente, ho impostato una query multimediale per ogni stato #columns, in cui quindi utilizzo calc() per calcolare il margine destro su ciascuno degli elementi (ad eccezione di quelli nell'ultima colonna).

Ecco il fiddle

Ora questo sta lavorando bene in Chrome e Firefox - ma quando ho eseguito questo in IE9 +

vedo un problema tecnico tra Stati media query (compresi sfarfallio e disobbedendo alla media query).

Ecco uno screenshot di quello che sto parlando

[screenshot prese a larghezza della finestra del browser di 710px]:

enter image description here

Si tratta di un bug di IE o ho fatto qualcosa di sbagliato ?

fonte

2013-05-20 Danield

FIX:

here is a smoothly working jsfiddle of my solution

indagando ulteriormente la matematica ho avuto un esploratore sospetto internet sta avendo problemi cercando di fare qualcosa di stupido (che altro è nuovo), e che era di permettere valori decimali cioè margin-left: 250.123px; causando così incongruenze MOLTO minuscole e rovinando il layout.

per correggere questo problema ho sottratto temporaneamente 1px da tutti i calcoli e tutto è alla ricerca liscia come può essere

@media (max-width: 350px) { 
    .container > div { 
    margin-left: calc(((100% - 150px)/2) - 1px); 
    margin-right: calc(((100% - 150px)/2) - 1px); 
    background:black; 
    } 
} 

@media (min-width: 350px) and (max-width: 550px) { 
    .container > div { 
    margin-right: calc((100% - 300px) - 1px); 
    background:red; 
    } 
    .container > div:nth-child(2n) { 
    margin-right: 0; 
    } 
} 
@media (min-width: 550px) and (max-width: 750px) { 
    .container > div { 
    margin-right: calc(((100% - 450px)/2) - 1px); 
    background:purple; 
    } 
    .container > div:nth-child(3n) { 
    margin-right: 0; 
    } 
} 

@media (min-width: 750px){ 
    .container > div { 
    margin-right: calc(((100% - 600px)/3) - 1px); 
    } 
    .container > div:nth-child(4n) { 
    margin-right: 0; 
    } 
}

EDIT:

ive colori aggiunto alle domande dei media per aiutare risolvere la fonte del problema e averli esclusi come problema. Ive ha anche escluso la modalità di compatibilità come causa di questo problema e la formattazione del calc sembra giusta.

take a look at the updated fiddle

erano le media query rottura vedremmo incoerenze nella tremolante colore così ... questo mi porta a credere che è un errore di calcolo matematico specifico per le nostre definizioni margine/spaziatura ... ulteriori indagini prossimamente

ho incontrato alcuni problemi con le media query in iE ... alcuni bug degni di nota sono

modalità di compatibilità - assicurarsi che questo sia spento può causare comportamento imprevisto o semplicemente rompere le media query tutti insieme

DOCTYPE - non dichiarando uno o non avere un doctype HTML5 può essere la causa di ancora più media query incongruenze

<!DOCTYPE html>

Ho notato che si sta utilizzando calc() il mio prima reazione fu di assicurarsi che tutti gli operatori matematici sono circondati da uno spazio bianco ... questo è un altro problemi ive incontrato, dove

calc(2px+5px)

ha la tendenza a fallire in cui la sintassi corretta dovrebbe essere

0.123.516,41 mila

calc(2px + 5px)

fonte

2013-05-23 14:42:06 Joe

Sono stato alla ricerca di una soluzione leggermente più pulita - questo è stato pienamente funzionante per me, ma preferirei una sorta di metodo troncato o arrotondato. – Joe

+1 Grazie. Quindi sembra che il problema non abbia nulla a che fare con le query sui media, ma piuttosto con il modo in cui IE rende sub-pixel - come spiegato [qui] (http://ejohn.org/blog/sub-pixel-problems-in-css/) ... destra? – Danield

sì, è proprio quello che stavo pensando - buon articolo da – Joe

css funzione Calc bug in IE

risposta

Problemi correlati