geschrieben am 09.07.10 von Sebastian Koch
overflow:hidden und IE7
overflow:hidden und IE7
Um Inhalte abzuschneiden, welche die Grenzen eines Elements überschreiten, sieht CSS die Eigenschaft overflow:hidden vor. Diese funktioniert tadellos in allen gängigen aktuellen Browsern wie Firefox 3, Opera, Chrome, Safari und Internet Explorer 8. Im Internet Explorer 7 jedoch lässt sich das gewünschte Verhalten leider nicht auf Anhieb integrieren. Die Inhalte laufen grundsätzlich sichtbar über die Grenzen des genutzen Elements.
<div class=overflowContainer style='overflow:hidden;'>
<div class=zuVielInhalt>
zu viel Inhalt, der über die Grenzen hinaus nicht sichtbar sein sollte
</div>
</div>
Um auch im IE7 das gewünschte Verhalten zu Erlangen, müssen dem übergreifenden Container sowohl eine feste Höhe und Breite als auch die position:relative übergeben werden.
<div class=overflowContainer style='overflow:hidden; width:20px; height:20px; position:relative;'>
<div class=zuVielInhalt>
zu viel Inhalt, der über die Grenzen hinaus nicht sichtbar sein sollte
</div>
</div>