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

Question

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

ora ho un DIV (l'involucro principale .. voglio tenerlo a 94% la percentuale di larghezza .. 94% al 100% del corpo) .. bene bene

Quindi, per rendere questo semplice.

- larghezza> 100% del corpo impostato

-> CONTENITORE 94% larghezza

---> Primogenita DIV 70% flottante sinistra (70% del contenitore)

- -> Secondogenita DIV 30% flottante destra (30% del contenitore)

Ma ho 2 colonne uguali sotto Primogenita DIV

-----> 50% e 50% larghezza percentuale

il bug è: in IE7 .. l'ultima colonna viene visualizzata sul fondo .. la sua non correttamente galleggiare .. Se riduco la larghezza a 29,9% !!! funziona ... penso che ie7 abbia un bug nel trattare le larghezze percentuali o qualcosa del genere. Per favore chiarisci questo. Mi auguro che si ottiene il problema perché il css/html è troppo lungo .. spero solo il suo un problema comune .. :(

Ecco la CSS per questo DIV .. Spero che aiuta :)

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; 
} 

Answer 1

Il problema è l'arrotondamento sub-pixel. Quando stai progettando con percentuali ci saranno momenti 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 diverse 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. Check it out qui:

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

L'altra soluzione che ho trovato quando 'troppo pieno' appena wont tagliato è quello di aggiungere un piccolo margine negativo per l'ultimo elemento di fila. 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 che questo aiuti. Saluti.

Answer 2

ecco la soluzione semplice per questo:

div { 
*min-width: 100%; 
} 

testato in IE7.

Answer 3

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

<!--[if IE 7]> 
    <style> 
     body { 
     padding:0 1% 0 0; 
     width:101%; 
     } 
    </style> 
<![endif]--> 

Answer 4

provare quanto segue:

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

funziona bene in IE7.