overflow:auto, position:relative und der IE

Hiho,

grad mal wieder über einen CSS-Fehler im IE 6 gestoßen.
Will man, dass ein Element bei Bedarf scrollt, verwendet man in der Regel overflow: auto.
Das funktioniert soweit ganz gut. Allerdings nur, solange das Element keine Kinderelemente enthält, welche die Eigenschaft position:relative besitzen. Ist dies der Fall tritt beim IE6 (vermutlich auch beim IE5.X) ein Fehler auf und der Inhalt tritt aus dem Container-Element heraus.

#container {
  height: 20px;
  overflow: auto;
}

li {
  position: relative;
}
<div id="container">
  <ul>
    <li>Listeneintrag</li>
  </ul>
</div>

Abhilfe schafft hier ein simples position: relative im Container-Element.
So einfach ist die Lösung, man muss es nur wissen ;)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.