IE6 und “Peek-a-boo”

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)

Kommentare:

XML-Feed


Login