Come posso aggirare il problema dell'arrotondamento percentuale di IE CSS?

Question

Sto provando a creare un sito dinamico in cui ho tre scatole mobili l'una accanto all'altra. Sono 33,33% in larghezza ciascuno. Il contenitore div intorno a loro è del 75% in larghezza.

ho trovato un articolo sul problema qui: CSS: Jumping columns
Ho anche trovato un esempio dello stesso problema qui: Jumping columns example

Trascinare la dimensione della finestra per vedere il salto in IE7 o versioni precedenti.

Qualcuno sa se è possibile aggirare questo? (senza Javascript)

Answer 1

In una situazione come questa, tenderei ad aggirare il problema utilizzando un foglio di stile solo IE che confonde i valori finché non funzionano. In questo caso, basta impostare le larghezze al 33%, non sarà perfetto ma allora è solo la natura del web.

Answer 2

Io uso due soluzioni diverse a seconda della situazione. In primo luogo, prova l'approccio Nicole Sullivan (utilizzando overflow: hidden; sull'elemento finale fila invece di galleggiante/larghezza):

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

.container { 
    width: 75%; 
} 

.box1 { 
    width: 33.33%; 
    float: left; 
    display: inline; /* fixes another IE bug */ 
} 

.box2 { 
    overflow: hidden; 
} 

Questo funziona nella maggioranza dei casi.

In caso contrario, aggiungo un margine negativo di diversi pixel all'ultimo elemento.

.box2 { 
    width: 33.33%; 
    float: left; 
    display: inline; /* fixes another IE bug */ 
    margin-right: -3px; 
} 

Se l'ultimo elemento è a destra, invece, basta aggiungere il margine negativo a sinistra. Finora questo ha funzionato per me nei pochi casi in cui lo overflow non andava bene.

Answer 3

Penso che una semplice risposta potrebbe essere quella di non arrotondare affatto, basta creare un elemento finale "spacer" con una larghezza dell'1% che condivide l'aspetto degli elementi 1/3. Anche IE dovrebbe essere in grado di gestire un arrotondamento 33 + 33 + 33 + 1.

Answer 4

Ho avuto lo stesso problema. ie7 non ha reso correttamente il 33.33%. Funzionerebbe con il 33% ma poi è stata una linea sottile. Ho usato il consiglio dal secondo blocco di codice nella prima risposta sopra, più un piccolo hack. Ha funzionato per me, spero che aiuti.

.all-boxes { 
    width: 33.33%; 
    float: left; 
    display: inline; 
    *margin-right: -1px; /* Add the asterisk */ 
} 

il valore del margine potrebbe essere necessario modificare, sulla base di implementazione, ma 1px funzionato per me.