Come risolvere il bug di Internet Explorer 7 quando si utilizzano larghezze percentuali per il layout?

Per favore aiutami in questo. Devo creare un layout usando le larghezze percentuali. Ho un involucro largo al 100%.

Ora ho un DIV (il wrapper principale .. Voglio tenerlo al 94% di larghezza percentuale .. 94% del 100% del corpo) .. okay bene

Quindi per rendere questo semplice.

-> BODY 100% larghezza impostata

-> CONTAINER 94% di larghezza

—> PRIMO BAMBINO DIV 70% float a sinistra (70% del CONTAINER)

—> SECOND CHILD DIV 30% float right (30% del CONTAINER)

Ma ho 2 colonne uguali sotto FIRST BAMBINO DIV

—–> 50% e 50% di larghezza percentuale

Il bug è: In ie7 .. l’ultima colonna è visualizzata in basso .. non è correttamente flottante .. Se riduco la larghezza al 29,9% !!! funziona … penso che ie7 abbia un bug nel trattare le larghezze percentuali o qualcosa del genere. Per favore chiarisci questo. Spero che tu abbia il problema perché il css / html è troppo lungo .. spero solo che sia un problema comune .. 🙁

Ecco il CSS per questo DIV .. Spero che aiuti 🙂

body { width: 100%; background: #fff; text-align: center; font-size: 12px; } #wide-primary { background: #fff url(img/shadow1.png) repeat-x top; position: relative; top: -1px; } #primary { width: 94%; margin: 0 auto 0 auto; text-align: left; } #features { float: left; width: 70%; padding: 2% 0 0 0; } .featurebox { float: left; width: 48%; padding: 0 2% 3% 0; } #lastnews { float: right; width: 30%; padding: 2% 0 2% 0; } 

Il problema è l’arrotondamento sub-pixel. Quando stai progettando con percentuali ci saranno momentjs in cui la matematica non risulta in pixel interi (il 70% di 721px è 504.7px). 721 è arbitrario, ma usando le percentuali ti imbatterai in numeri arbitrari. Non c’è modo di evitarlo. La maggior parte dei browser individua una soluzione di arrotondamento per te che non interrompe il layout. IE7 (e più vecchio) semplicemente arrotonda. Arrotondando, la larghezza del contenitore a 721 px includerà una scatola a 505 px e un’altra a 217 px per un totale di 722 px – più del 100%. A quel punto, IE decide che la seconda casella non può essere inserita e la rilascia sotto.

Ci sono varie soluzioni a seconda della situazione. Nicole Sullivan ha una soluzione interessante basata sull’uso di “overflow: hidden”; sulla tua ultima colonna piuttosto che una combinazione float / width. Lo uso quando posso. Controllalo qui:

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

L’altra soluzione che ho trovato quando “overflow” non lo taglierà semplicemente aggiungendo un piccolo margine negativo all’ultimo elemento di una riga. Se stai fluttuando a sinistra, aggiungi un margine negativo di diversi pixel a destra. Galleggiando a destra, aggiungilo a sinistra. Non ho avuto effetti negativi da questo (anche se sarei lieto di sapere se altri lo fanno).

Spero possa aiutare. Saluti.

Ecco la soluzione semplice per questo:

 div { *min-width: 100%; } 

testato in IE7.

Questo è quello che sto usando per risolvere quel problema su IE 7.

  

Prova quanto segue:

 div { width: 100%; *overflow: auto; } 

Funziona bene in IE7.