Publicado por Juan Pablo el 2.Nov.2008 | Comentarios (0)
Actualmente estoy trabajando en un proyecto cuya hoja de estilo (CSS) debe renderizar igual en IE6, IE7 y Firefox, es decir, full soporte para los navegadores más populares. Es un requerimiento del cliente, así que no puedo esquivar a IE6, el más horrible de todos los navegadores.
Gracias al cielo, IE 7 no me da tantos dolores de cabeza, aunque igualmente malo a la hora de respetar estándares. El que me hace sufrir es IE6, y mi problema con él (y el que motiva esta entrada) es que no soporta las propiedades: max-width, max-height, min-width y min-height, a diferencia de IE7, que sí lo hace.
Irónicamente, para solucionar este problema vamos a recurrir a las Propiedades Dinámicas que Microsoft nos entrega a los desarrolladores, ¿ven que tan malos no son?.
P: ¿Cómo hacemos para que min-width
,min-height
y max-width
, max-height
sean soportados en IE6?.
R: Usando Javascript.
elemento {atributo:expression([código javascript]) }
Ejemplo:
#contenido {width:expression(400 + "px");}
Perfecto, ahora usaremos esto para solucionar nuestro problema, el elemento contenido
debe tener una altura mínima de 800px; entonces:
#contenido {min-height:800px}
Pero IE6 (IE7 lo leerá perfectamente) no tiene idea de lo que acabo de poner en nuestro CSS, pero entenderá si usamos esas mágicas Propiedades Dinámicas, aquí vamos:
#contenido {height: expression(this.scrollHeight < 800 ? "800px" : "auto"); }
Obviamente, debemos aislar las reglas de estilo para que sea leídas exclusivamente por IE6, algunos usan el bug de la estrella y el elemento html
otros usan los comentarios condicionales ; en mi caso uso el primero, por lo tanto el código quedará de la siguiente forma:
* html #contenido {height:expression(this.scrollHeight < 800 ? "800px":"auto");}
Entonces, para ancho y alto mínimos tenemos:
* html #contenido {width:expression(document.body.clientWidth < 800 ? "800px":"auto");}
* html #contenido {height:expression(this.scrollHeight < 800 ? "800px":"auto");}
Y para ancho y alto máximos tenemos:
* html #contenido {width:expression(document.body.clientWidth > 800 ? "800px":"auto");}
* html #contenido {height:expression(this.scrollHeight > 800 ? "800px":"auto");}
Enlace Permanente, Comentarios (0), Publicada en: CSS