IE6 és a DIV méretezése

Jelenleg egy olyan projektben dolgozom, ahol az egyetlen és kizárólagos webkliens az Internet Explorer, annak is az öregecske 6-os verziója. Mint tudjuk az IE mindig is arról volt hírhedt, hogy nagyvonalúan kezeli a szabványokat, de különösen hírhedt ez a verzió a DIV elementek érdekes kezeléséről. Nálam ez most éppen azért okozott fejtörést, mert dekorációs célzattal egy 1px-es vonalat kellett elhelyeznem, ami dinamikusan alakulgat. Lényeg az, hogy a leglogikusabb megoldásnak egy 1px magas DIV tűnt. Volna. Ha az IE hajlandó lett volna 10px-nél kisebb elemet megjeleníteni.
Hosszas guglizás után kisült, hogy ez a csacsi IE nem hajlandó az aktuális fontméretnél alacsonyabb lenni, csak, ha ezt külön megmondjuk neki. Hm. Ez vajon kinek a fejéből pattanhatott ki? Vagy csak mellékhatás? Bizonyíték gyanánt nézd meg ezt a kódot IE6 alól:

<div style="background-color: #FF0000; height: 1px"></div>

Ime:

Ha a fentit tudjuk, akkor már könnyen rá lehet jönni, hogy milyen beállításokkal lehet elérni a kíván 1px magasságot.
Logikusnak tűnik a DIV számára az 1px-es fontméret beállítása.

<div style="background-color: #FF0000; height: 1px; font-size: 1px"></div>

Ez a megoldás majdnem jó, de nem teljesen. Így már tudunk egész kicsi magasságot beállítani, de 1px-et mégsem.
Az igazi okosság az overflow tulajdonság beállítása, ami azt jelenti, hogy lekezeljük a kilógó részeket.

<div style="background-color: #FF0000; height: 1px;overflow: hidden"></div>

Így már tökéletes 1px-es csíkunk van. Fentieket teszteléséhez kiválóan lehet alkalmazni az IETester nevű segédprogramot, ami 5.5-től felfelé bármelyik IE verziót tudja nekünk prezentálni.