¿Cómo reparar el error de Internet Explorer 7 cuando se usa el ancho de porcentaje para el diseño?

Question

Por favor, ayúdenme en esto. Necesito crear un diseño usando anchos de porcentaje. Tengo un envoltorio que es 100% ancho.

ahora tengo un DIV (la envoltura principal .. Quiero mantenerlo a 94% el porcentaje de anchura .. 94% del cuerpo 100%) .. bien fina

Así que para hacer este sencillo.

- anchura> BODY 100% fijado

-> CONTAINER 94% anchura

---> primer hijo DIV 70% de flotante a la izquierda (70% del contenedor)

- -> segundo hijo DIV 30% derecho flotador (30% del contenedor)

Pero tengo 2 columnas iguales bajo primer hijo DIV

-----> 50% y 50% anchura porcentaje

El error es: En ie7 ... la última columna se muestra en la parte inferior ... no está flotando correctamente ... Si reduzco el ancho al 29.9% !!! funciona ... creo que ie7 tiene errores al tratar anchos de porcentaje o algo así. Por favor aclare esto. Espero que usted consiga el problema porque el css/html es demasiado largo .. sólo espero que es un problema común .. :(

Aquí es el CSS para el DIV .. Espero que ayude :)

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

El problema es el redondeo subpíxel. Cuando diseñe con porcentajes, habrá ocasiones en que las matemáticas no darán como resultado píxeles completos (70% de 721px es 504.7px). 721 es arbitrario, pero usando porcentajes te encontrarás con números arbitrarios. No hay forma de evitar eso. La mayoría de los navegadores encuentran una solución de redondeo para usted que no rompe el diseño. IE7 (y más viejo) simplemente redondea. Al redondear, el ancho de su contenedor a 721px incluirá una caja a 505px y otra a 217px para un total de 722px, más del 100%. En ese momento IE decide que la segunda casilla no cabe y la coloca debajo.

Existen varias soluciones según su situación. Nicole Sullivan tiene una solución interesante basada en el uso de 'overflow: hidden;' en su última columna en lugar de una combinación de flotante/ancho. Lo uso cuando puedo Échale un vistazo aquí:

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

La otra solución que he encontrado cuando 'desbordamiento' apenas no lo corte es añadir un pequeño margen negativo al último elemento en una fila. Si está flotando hacia la izquierda, agregue un margen negativo de varios píxeles a la derecha. Flotando a la derecha, agrégalo a la izquierda. No me he encontrado con ningún efecto negativo (aunque me gustaría saber si otros lo hacen).

Espero que ayude. Aclamaciones.

Answer 2

Aquí está la solución simple para esto:

div { 
*min-width: 100%; 
} 

probado en IE7.

Answer 3

Esto es lo que estoy usando para solucionar ese problema en IE 7.

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

Answer 4

intente lo siguiente:

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

funciona bien en IE7.