1
Hallo,
Ein schöner IE-Bug mit Float kam mir gestern wieder über den Weg. Und zwar jener, dass IE den Container, welcher nach unten überstehende Floats enthält, über die Floats aufspannt (ohne clears nach den Floats im Container). Zu allererst wusste ich nicht, was ich machen sollte, doch mit rumprobieren fand ich die ziemlich seltsame Lösung - der IE macht das nur, wenn der Container eine fixe Breite bekommt. Ein umschließendes Div, das die gewünschte Breite gesetzt bekommt, löst den Fall. Gibt es für diesen Bug einen klingenden Namen? Ich kenne den Guillotine-Bug von PositionIsEverything, präventiv dazu habe ich auch ein clearendes Div nach dem Container eingesetzt - aber das Verhalten war mir schon ziemlich neu und verursachte ein Reflex-Kopfschütteln mit Stirnklatschen. Wahrscheinlich deshalb, weil ich selbst nie das Verhalten benötigt habe, dass etwas unten "übersteht".
Testen kann man das, indem man in diesem Beispiel einfach mal div#inner eine fixe Breite verpasst.
Wohlgemerkt: IE macht dies auch im "Standards-Compliant Mode".
Ein schöner IE-Bug mit Float kam mir gestern wieder über den Weg. Und zwar jener, dass IE den Container, welcher nach unten überstehende Floats enthält, über die Floats aufspannt (ohne clears nach den Floats im Container). Zu allererst wusste ich nicht, was ich machen sollte, doch mit rumprobieren fand ich die ziemlich seltsame Lösung - der IE macht das nur, wenn der Container eine fixe Breite bekommt. Ein umschließendes Div, das die gewünschte Breite gesetzt bekommt, löst den Fall. Gibt es für diesen Bug einen klingenden Namen? Ich kenne den Guillotine-Bug von PositionIsEverything, präventiv dazu habe ich auch ein clearendes Div nach dem Container eingesetzt - aber das Verhalten war mir schon ziemlich neu und verursachte ein Reflex-Kopfschütteln mit Stirnklatschen. Wahrscheinlich deshalb, weil ich selbst nie das Verhalten benötigt habe, dass etwas unten "übersteht".
Testen kann man das, indem man in diesem Beispiel einfach mal div#inner eine fixe Breite verpasst.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
div#outer { width: 750px; }
div#inner { background: lime; /*width:750px;*/ }
div#one { background: yellow; float: left; height: 200px; width: 300px; }
div#two { background: blue; float: right; height: 600px; width: 200px; }
-->
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="one"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam convallis, risus in ornare pretium, justo felis gravida dolor,
quis vulputate purus ligula eget nulla. Suspendisse risus. In at leo
a nisl rutrum sollicitudin. Sed ipsum tortor, tincidunt in, porttitor
eget, auctor sed, metus. Suspendisse potenti.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam convallis, risus in ornare pretium, justo felis gravida dolor,
quis vulputate purus ligula eget nulla. Suspendisse risus. In at leo
a nisl rutrum sollicitudin. Sed ipsum tortor, tincidunt in, porttitor
eget, auctor sed, metus. Suspendisse potenti.
</p>
<div id="two"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam convallis, risus in ornare pretium, justo felis gravida dolor,
quis vulputate purus ligula eget nulla. Suspendisse risus. In at leo
a nisl rutrum sollicitudin. Sed ipsum tortor, tincidunt in, porttitor
eget, auctor sed, metus. Suspendisse potenti.
</p>
</div>
<div style="clear:both"><!--guillotine-bug--></div>
</div>
</body>
</html>Wohlgemerkt: IE macht dies auch im "Standards-Compliant Mode".