IE6 - No respeta divs con alturas < 20px

[sk8]

Hola.

Me ocurre lo siguiente con IE6 y IE5.5 y seguraemte con versiones anteriores. Defino varias capas con colores de fondo de diferentes tamaños. Todas aquellas capas que tienen un heigth inferior a 20 px sea cual sea me las dibuja de 20px. Sin embargo IE7 y FF respeta las dimeniones.

Un ejmplo de lo que me ocurre.

Definición de varias capas de distinta altura: 4 px, 6px, 12px.

Código:

#bloque1
	{
	top:200px;left:100px;position:absolute;height:50px;width:300px;background-color:#666666;z-index:1;
	}
#bloque2
	{
	top:0px;left: 10px;position:absolute;height:4px;width:50px;background-color:#999999;z-index:1;
	}
#bloque3
	{
	top:0px;left: 100px;position:absolute;height:6px;width:50px;background-color:#999999;z-index:1;
	}
#bloque4
	{
	top:0px;left: 200px;position:absolute;height:12px;width:50px;background-color:#999999;z-index:1;
	}

Resultado: La capa de altura=50px mantiene sus proporciones mientras que las capas de altura 4, 6 y 12 aparecen con una altura=20px.

He probado poniendo margin-top=0px, margin-bottom=0px, padding-top=0 .... por si ie6 hacia que todas las capas tuvieran que tener una altura minima de 20px.

Estos resultados los he obtenido con IETester. Nose cual puede ser el problema.

un saludo y gracias de antemano.

[Mikmoro]

El truco al menos para IE6 es asignarles un font-size de 12px, 6px y 4px respectivamente (quizá 3, 5 y 10 para ser más exactos).

Mikel.

[sk8]

Efectivamente. Funciona a la perfección tal como dices.

Muchas gracias y un Saludo.

[Jamati]

Otro truco podría ser también asignarle a dichos <div> el atributo overflow:hidden... esto tambien funcionaría, no Mike ?

[Mikmoro]

Pues sí, tienes razón, también funcionaría. Yo tengo costumbre de hacerlo de la otra manera, pero como siempre, todo depende de qué vayan a llevar dentro.



Mikel.