Vzhůru dolů

MSIE Bug: Absolutní blok umístěný před float blokem se nezobrazuje

Dnešní potíže s Internet Explorerem. Mám tento kód:

<div style="border: 3px solid red; position: absolute; top: 60px; left: 8px;">                   
 1) Absolutně pozicovaný blok (V MSIE chybně neviditelný)
 </div>  

 <div style="border: 3px solid green; float: left;">
 2) Float blok
 </div>

 <div style="border: 3px solid blue; clear: left; height: 1px;">
 3) Čistící blok s výškou 1px
 </div>

První blok (červený) v IE 6 ani 7 neuvidíte. Online v tomto souboru.

Umoudří se ale, když:

• třetímu čistícímu (modrému) bloku nenastavíte 1px výšku
• absolutně pozicovaný (červený) blok umístíte až za čistící blok
• mezi absolutně pozicovaný (červený) a float (zelený) blok umístíte jakýkoliv prvek, třebas prázdný

To, že se absolutní a plovoucí prvky nemají v Exploreru rádi, už věděl také třeba Bruno Fassino.