Šuplík Honzy Hučína

Bug margin-bottom + float

Máte-li orámečkovaný blok, uvnitř něho další blokový element s nastaveným margin-bottom:0px a těsně za tím plovoucí objekt, vykreslí vám IE ve verzi 5.0 nebo 5.5 vodorovnou čáru přes celý orámečkovaný blok. Prohlédněte si příklad.

Abych tedy byl zcela přesný: orámečkovaný blok musí splňovat ještě dvě podmínky, nesmí mít nastavenou šířku (width) ani pozadí (background). Z toho vyplývají možná řešení bugu.

1. Nastavit šířku vnějšího (orámečkovaného) bloku. To je nejjistější.
2. Nastavit pozadí vnějšího bloku. To je riziko kvůli možnému vzniku peekaboo bugu, navíc nastavené pozadí může kolidovat s pozadím celé stránky.
3. Nastavit margin-bottom na hodnotu větší než 0 nebo se celé konstrukci vůbec vyhnout.

Nevím, zda se s tímto bugem už někdo někde setkal, rozhodně jsem ho nikde nenašel popsaný. Ve srovnání s peekaboo bugem nastává mnohem řidčeji a projevuje se jen u výběhových prohlížečů, proto není zdaleka tolik palčivý. Přesto jsem uznal za vhodné se o něm zmínit.