IE 7 y el modelo de cajas

Hola a todos.

Trabajo desde hace meses en la página web de una importante empresa. Está montada con CSS y nos costó un tiempo aprender a emplear el hack del modelo de cajas para que IE 6 "pintara" y estructurara la página exáctamente igual que Firefox. El lanzamiento de la página será dentro de un mes, aproximadamente y nos encontramos con el lanzamiento de IE 7, que supuestamente corrige muchos bugs del 6. Todo esto está fenomenal, sí, pero esta mañana comprobamos cómo se ve nuestra página en IE 7... Perfecto. Perfecto porque efectivamente el problema de tener que "redefinir" los anchos para IE con el guión bajo delante se ha solucionado. Sí, creo que podríamos decir que IE 7 interpreta las medidas igual que Firefox (tampoco aseguro, porque aún no lo he probado todo y a lo mejor me equivoco). El problema es que, como "buen" navegador lleno de ñapas... se traga las "redefiniciones" de medidas que utilizamos para que IE 6 lo estructurara todo correctamente. El resultado, por supuesto es que si ves la página en IE 6 o en Firefox, fenomenal, pero si la ves con IE 7, toma las medidas especificadas para IE 6, y como ya no hay bug, se descoloca absolutamente todo.

¿Alguien sabe alguna manera de hacer que esto no sea así? Es decir... y volviendo al maravilloso mundo de las ñapas... ¿Se le puede decir de alguna manera que tome las medidas de Firefox, y no las de Explorer? O... ¿hay alguna manera de decirle al puñetero explorer que los guiones bajos son para una determinada versión de explorer? (Algo así como... esto es hasta IE 6, y que lo que venga detrás de IE 6 pase de todo y tome las medidas reales...)

Agradecería mucho que me ayudárais.

Saludos!!

Usa los condicionales:

Código :

<!--[if IE 7]>
Se puede colocar cualquier elemento HTML y sólo se verá en IE7.
<![endif]-->

Más info aquí

siempre puedes decirle:

Código :

<!--[if lt IE 7]>
Aquí iría tu code 
<![endif]-->

De esa manera podrás separar los hacks y que sólo se apliquen a IE 6 o inferior ... y dejar el css normal sin mover.

Muchas gracias!! Después de mucho buscar encontré la solución de los condicionales, aunque no la he aplicado todavía por falta de tiempo. En cualquier caso, me parece una manera bastante sencilla de solventarlo. De todos modos, otra cosa que encontré fue un hack similar al del guión bajo. Es un poco más "guarro", por decirlo de algún modo, no es tan elegante como el del condicional, pero quizás a alguien pueda serle de utilidad, así que os dejo el link de donde lo he encontrado. Consiste, simplemente en que, en lugar de utilizar el guión bajo para pasarle los parámetros a IE6, se le pone un asterisco, de modo que los parámetros los pasa a IE 6 e IE7.

width: 85%; (estándar)
_width: 90%; (para IE6, pero NO IE7)
*width: 90%; (para IE6 e IE7)

http://www.minid.net/2006/03/28/reglas-especiales-para-ie7

De todas formas, muchas gracias de nuevo!!
Saludoss

La solucion que te da Aoyama es la mejor, ya que con las condicionales no necesitas desestandarizar tu código CSS:

Código :

<style type="text/css">
#aca{
iria-lo:normal;
}
</style>

<!--[if lt IE 7]>
Aquí iría tu hack
<![endif]-->

Saludos!

HOLY HACK - IE 6

* html elemento { ... }

HACK IE 7 (no anteriores)

*:first-child+html elemento { ... }

Las condicionales es la mejor opción. Dentro de ellas, mandas llamar una .css que escribas exclusivamente para esa lacra de agente de usuario. De ese modo, no arruinas tu código.

No hay nada mejor que poner un condicional de IE para cada version y hacer un llamado por link a cada hoja de estilos por separado. Ahh la vida en la web..

Yo hace un mes que incluyo mi ie7.css

Ya está hecho con condicionales, y sin ningún problema... Quiero decir, pasé las "redefiniciones" de IE6 a una hoja ie6.css y funciona a la perfección, así que hoy crearé ie7.css e iré variando parámetros hasta que se vea bien... jejeje. Gracias a todos!!