Div con altezza molto piccola su IE6

Altro piccolo problema, sempre con il solito “maledetto” IE6 di casa Microsoft.

Lavorando ad un sito basato su box-model e CSS, quindi senza layout tabellare ma unicamente realizzato con DIVs, capita spesso di dover inserire piccole spaziature o separatori.

Un DIV con height molto piccola, magari di pochi pixel, viene correttamente renderizzata su IE7-IE8-Firefox ma, manco a dirlo, ecco che si presentano i primi problemi su IE6 …

IE6 sembra non considerare minimamente la proprietà “height” se impostata su piccole dimensioni, ad esempio 5px, 10px. Sembra che invece oltre i 20px circa, questa venga renderizzata correttamente.

Googlando un po’, ecco che scopro di non essere il solo:

http://www.velocityreviews.com/forums/t161151-p2-div-height-ie6-workaround.html

http://archivist.incutio.com/viewlist/css-discuss/71562

The extra space is probably caused by line-height, along with IE’s
broken overflow behavior which automatically expands an element to fit
the content, regardless of any specified dimensions.

Set overflow:hidden

Provo … funziona!

Sembra proprio che IE6 tenda ad andare in Overflow se la dimensione che tentiamo di settare è più piccola della dimensione del font (o forse del line-height), andando quindi ad “allargare” il DIV stesso in altezza.

Settando “overflow:hidden”, si forza il browser a renderizzare nascondendo il riempimento in eccesso, ottenendo il risultato voluto.

Probabilmente anche settando un font più piccolo, magari di 5px così come la height, si otterrebbe lo stesso risultato, ma preferisco utilizzare la soluzione basata su overflow:hidden, sicuramente più pulita.

Altro giro, altro regalo ….

Grazie Bill