Siempre tengo problemas con IE6

[xeme]

Hola! Ya llevo algún tiempo maquetando webs en css y siempre me topo con el mismo problema.

Tengo la manía de probar mis trabajos en diferentes navegadores y resoluciones de pantalla. Pues bien, siempre tengo el mismo problema con IE6, se me descuadra la estructura y las posiciones de ALGUNOS divs.

Mi pregunta es: ¿Hay alguna propiedad específica del css que no entienda IE6? Creo que el problema viene cuando utilizo position:relative.

¿Alguien puede aclararmelo?

[rb3m]

width. No es que IE6 no la entienda, sino que la interpreta diferente.

Para IE6 el ancho total de una caja es el valor de lo que va adentro de la caja (width), más el relleno (padding). O sea, si dices width: 100px; padding: 10px; margin: 10px; IE 6 te va a calcular el ancho final como 100 de width más 20 de padding (10 de cada lado).

En cambio, el estándar dice que debe ser width más el padding MÁS margin. Es decir, un navegador adaptado a estándares va a interpretar la caja de arriba como 100px de width, más 20 de padding más 20 de margin. Ahí es donde se rompe todo.

Si lo vemos desde un punto de vista lógico IE6 tiene más sentido, porque el ancho de una caja real, digamos de cartón sería lo que contiene más el relleno, pero el espacio entre caja y caja no es parte de la caja. Pero el modelo estándar dice otra cosa.

Una vez que entiendes el modelo de cajas de IE6 y su diferencia con el modelo de cajas estándar vas en camino a resolver el 90% de tus problemas.

[KaozC9]

Iniciado por rb3m

width. No es que IE6 no la entienda, sino que la interpreta diferente.

Para IE6 el ancho total de una caja es el valor de lo que va adentro de la caja (width), más el relleno (padding). O sea, si dices width: 100px; padding: 10px; margin: 10px; IE 6 te va a calcular el ancho final como 100 de width más 20 de padding (10 de cada lado).

En cambio, el estándar dice que debe ser width más el padding MÁS margin. Es decir, un navegador adaptado a estándares va a interpretar la caja de arriba como 100px de width, más 20 de padding más 20 de margin. Ahí es donde se rompe todo.

Si lo vemos desde un punto de vista lógico IE6 tiene más sentido, porque el ancho de una caja real, digamos de cartón sería lo que contiene más el relleno, pero el espacio entre caja y caja no es parte de la caja. Pero el modelo estándar dice otra cosa.

Una vez que entiendes el modelo de cajas de IE6 y su diferencia con el modelo de cajas estándar vas en camino a resolver el 90% de tus problemas.

Muy bien explicado rb3m, pero diria que el 70 u 80% de los problemas solamente xD lo navegadores IE6 hasta IE8, son muy mañosos, entonces la solucion seria crear un css aparte para IE o bien utilizar hacks (no recomendable para la validacion), esperemos que IE9 sea tan bueno como dice ser xD

[matius]

Iniciado por KaozC9

IE9 sea tan bueno como dice ser

No, no lo es, y para muestra la liste de compatibilidad
http://findmebyip.com/litmus/#target-selector

De hecho será el de peor soporte.

[xeme]

De acuerdo! La verdad que venía haciendo eso, un css aparte para IE6... pero quería una solución única para todos los navegadores.

Muchas gracias a todos por contestar!

Un saludo

[miros84]

Yo he encontrado una solucio unica y va bastante bien.

Pon este codigo en el header y IE6 funcionará como IE9

Código:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->