IE6 und “Peek-a-boo”
Von Joachim Krammer | CSS-Browser
Vor einigen Tagen hab ich schon mal über ein ominöses Phänomen des IE6 berichtet, welcher definitiv vorhandene Container nicht richtig bzw. bei Reload nicht mehr richtig darzustellen vermag.
Soeben hab ich eine Beschreibung des Bugs gefunden, der auch “Peek-a-boo”-Bug (sinngemäß “Versteckspiel”, “Versteckter Fehler”) genannt wird. Der IE6 hat, wie auch der Workaround von Olaf und mir zeigt, Probleme bei der Darstellung eines standardmäßig als “static” definierten Containers, welcher durch eine Hintergrundfarbe überlagert wird.
‘position’
Wert static | relative | absolute | fixed | inherit
Ausgangswert: Static
Angewendet auf: Alle Elemente, aber nicht auf erzeugten Inhalt
Vererbt: Nein
Prozentwerte: N/A
Medium:
Visual
(Quelle: CSS2-Spezifikation)
Erst wenn man diesem ein “position:relative” zuweist, verhält sich der IE6 “normal”.
Eine unschöne Spezialität des Internet Explorers ist es, dass er im Zusammenhang mit Floats gelegentlich Teile einer Webseite unterschlägt und einfach nicht anzeigt. Erst beim Scrollen oder Überfahren eines Links ist der Inhalt plötzlich da: der sogenannte Peek-A-Boo Bug […]
(Quelle: Stichpunkt CSS)
Mögliche Workarounds hiefür sind:
Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal, I know.
Give div#floatholder an explicit ‘width’ or ‘height’. Also quite restrictive.
Give both div#floatholder and div#float ‘position: relative’. Be sure to fully test this method.
(Quelle: Position is everything)