css - todos - vista de compatibilidad internet explorer 11 windows 7
¿Cómo arreglar el error de Internet Explorer 7 cuando se usa el ancho de porcentaje para el diseño? (4)
Por favor, ayúdame en esto. Necesito crear un diseño usando anchos de porcentaje. Tengo un envoltorio que es 100% ancho.
Ahora tengo un DIV (el contenedor principal ... Quiero mantenerlo con un 94% de porcentaje de ancho ... 94% de un cuerpo al 100%) ... bien
Entonces para hacer esto simple.
-> BODY 100% ancho establecido
-> CONTENEDOR 94% ancho
---> PRIMER NIÑO DIV 70% flotante a la izquierda (70% del CONTENEDOR)
---> SEGUNDO NIÑO DIV 30% flotante a la derecha (30% del CONTENEDOR)
Pero tengo 2 columnas iguales bajo FIRST CHILD DIV
-----> 50% y 50% de ancho porcentual
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 tengas el problema porque el css / html es demasiado largo ... solo espero que sea un problema común ... :(
Aquí está el CSS para este 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;
}
Aquí está la solución simple para esto:
div {
*min-width: 100%;
}
probado en IE7.
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.
Hay varias soluciones dependiendo de 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 Compruébalo aquí:
http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
La otra solución que he encontrado cuando el ''desbordamiento'' simplemente no se corta es agregar un pequeño margen negativo al último elemento de 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.
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]-->
Pruebe lo siguiente:
div {
width: 100%;
*overflow: auto;
}
Funciona bien en IE7.