Crash Internet Explorer
Hace algún tiempo lei en anieto2k como se podía fundir los plomos a Internet Explorer unicamente con CSS, o con una sola linea de javascript y la verdad es que me hizo gracia.
Lo que no me hizo tanta gracia fue perder toda una tarde de trabajo por culpa de otro bug en Internet Explorer.
El problema
Estoy trabajando en un diseño semi-líquido para una web, y al principio todo iba sobre ruedas, float por aqui, padding por allá, feliz y contento. Pero claro, IE no soporta min-width, así que dedique un rato a buscar un hack para solucionarlo y di con algo como esto:
-
div#main{
-
min-width:766px; /*CSS Estandar*/
-
width:expression(document.body.clientWidth <765 ? "766px" : "auto" ); /*para IE*/
-
}
De esta forma, mi web sería liquida para anchos superiores a 766px y sólida para el resto.
expression es un invento de Microsoft para insertar código javascript en las hojas de estilo, es una caracteristica propietaria y para no perder la costumbre no aparece en el estándar ni de lejos.
Bueno, al menos podía simular un min-width en IE y seguir con lo mio... pues va a ser que no!!
Simplificado al máximo, mi código XHTML era como esto:
Con Firefox todo funciona como debe, la capa #main se adapta al ancho de la ventana siempre y cuando esta sea más ancha que 766px, si es más pequeña #main mantiene el los 766px de ancho deseados y se sigue trabajando en paz.
La sorpresa
Con IE se cuelga irreversiblemente en cuanto rebasamos el límite de los 766px, entonces un servidor empieza a maldecir en arameo.
Antes de seguir, decir que uso W2000 pro SP4, con Internet Explorer v6.0
He colgado un ejemplo en http://www.planseldon.com/labs/crash_ie/
AVISO:
Si visitas esta web IE se colgará.
La solución
Afortunadamente basta con cambiar auto por 100% para que funcione bien:
-
div#main{
-
min-width:766px; /*CSS Estandar*/
-
width:expression(document.body.clientWidth <765 ? "766px" : "100%" ); /*para IE*/
-
}
No llegó la sangre al rio, lo que realmente me llamó la atención es que ese tip aparecía en cantidad de sitios, como sitepoint y no llegaba a entender como me explotaba en la cara de esa forma, hasta que me dió por quitar la declaración del tipo de documento:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
Las dudas
- ¿Por qué ocurre esto?
- ¿Por qué funciona sin el DOCTYPE?
- ¿Pasa lo mismo con otras versiones de Windows / IE?
- ¿Estoy metiendo la pata en algo?
Comentarios
[…] Despues de mi lamentable experiencia con Internet Explorer me propuse encontrar un método mas fiable para controlar en ancho minimo de una caja en los navegadores de Microsoft. […]
19 Septiembre 2006 el plan seldon — min-width en internet explorer (I)
Las respuestas a las preguntas las tienes aqui:
http://www.domestika.org/foros/viewtopic.php?t=36281
Tienes que cuidar mucho la expression para que no pete Explorer, y además para contemplar las versiones 5.X
Si quieres echar un ojo a una implementación que te resuelve a la vez MAX y MIN Width aqui la tienes:
http://www.domestika.org/foros/viewtopic.php?t=47512
Saludos
19 Septiembre 2006 orange
Ok. muchas gracias.
19 Septiembre 2006 hari
dsad
27 Octubre 2008 Anónimo