El diseño web tiene el enorme inconveniente de que cada navegador interpreta las cosas como quiere. Actualmente tengo que desarrollar con un FireFox 2.x, un FireFox 3.x, IE 6.0 e IE 7.0 simultáneamente; todo un dolor de cabeza.
Muchas veces observo que un div tiene 4 píxeles más en Internet Explorer que en Firefox, y me vuelvo loco para saber por qué y vuelvo a preguntarme por qué el tamaño del div es distinto en IE que en FF. Si notas que te ocurre fíjate en lo siguiente: ¿hay alguna imagen dentro del div? Si hay alguna acabas de encontrar la fuente de tu problema.
IE pone automáticamente un margen de 4 píxeles en la parte inferior de la imagen, lo que hace que el div se haga 4 píxeles más grande. La solución consiste en ponerle a la imagen:
style=”margin-bottom:-4px”
y un dolor de cabeza menos. Sólo te quedan 9999
Otro problema que ocurre mucho con el tamaño de los div es que en IE creas un contenedor de, por ejemplo, 4 píxeles, y compruebas como por arte de magia que tiene más de 20px y sin embargo en FF sí que tiene la altura deseada. El problema es que los div en IE tienen un tamaño mínimo para que “quepa” el texto escrito. La solución consiste en disminuir el tamaño de la letra del div escribiendo:
style=”font-size: 1px”
Espero que a alguien le aproveche este artículo y dos dolores de cabeza menos. Sólo le quedan 9998