IE löscht nachfolgende Floats nicht

Ich versuche, zwei divs auf die gegenüberliegenden Seiten der Seite zu floaten, mit Text zwischen ihnen fließt. Der obere Teil des zweiten (linksbündig ausgerichteten) div sollte gerade mit dem unteren Teil des ersten (rechts ausgerichteten) div sein. Der folgende Code funktioniert gut in FF, Chrome, Opera, usw., aber sie löschen nicht richtig in IE. Beide divs erscheinen am Anfang des Textes.IE löscht nachfolgende Floats nicht

Wenn ich das linksbündige div tief genug innerhalb des Textes verschiebe, funktioniert es gut im IE, aber das ist nicht wirklich eine nachhaltige Lösung.

Ich habe mehrere Seiten auf IE CSS Float Bugs gefunden, aber ich habe nichts gefunden, das direkt dazu spricht.

CSS

div { 
    width: 200px; 
    margin-top: 10px; 
    border-style: solid; 
    border-width: 1px; 
    position: relative; 
} 
.wrapper { 
    width: 600px; 
    border-color: #FF0000; 
} 
.right { 
    float: right; 
    border-color: #00FF00; 
} 
.left { 
    float: left; 
    clear: both; 
    border-color: #0000FF; 
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<link rel="stylesheet" href="float.css" /> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="right"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Nulla pretium tempor leo. Vivamus mi risus, dapibus ac, 
     consectetur quis, pellentesque eget, sem. 
    </div> 
    <div class="left"> 
      Proin malesuada. Ut vel lorem. Cras rhoncus nisl accumsan 
      turpis tristique consequat. Sed lacinia ligula at nibh. 
      Morbi in quam. Morbi commodo nibh. 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nulla pretium tempor leo. Vivamus mi risus, 
    dapibus ac, consectetur quis, pellentesque eget, sem. 
    Maecenas est dui, imperdiet nec, fermentum ut, 
    pretium a, orci. Quisque hendrerit interdum orci. 
    Nulla sit amet risus non enim ultrices bibendum. 
    Aenean arcu purus, rhoncus at, vestibulum vel, 
    volutpat et, nunc. Integer eget risus eget purus viverra 
    congue.</p> 
    <p>Nullam vel libero ut purus semper ullamcorper. 
    Pellentesque mattis tincidunt odio. Nullam pulvinar 
    orci at dolor. Sed volutpat eros ac elit. 
    Praesent porttitor libero sed felis. Vivamus lobortis 
    pellentesque diam. 
    Proin laoreet massa ac metus. Integer faucibus lorem 
    molestie nibh. Integer id massa. Integer ligula ipsum, 
    pellentesque id, interdum at, pretium eget, orci. 
    Proin malesuada. Ut vel lorem.</p> 
</div> 
</body> 
</html>

Quelle

2009-04-27 dkuchler

Was ist Ihre Frage? Es ist definitiv ein Fehler, und es ist in IE8 behoben, aber Fehler in IE sind nicht etwas Neues. Möchten Sie es in IE7 arbeiten lassen oder nur sicherstellen, dass es ein Fehler ist? –

Ja, ich versuche, es in IE6/7 zu arbeiten. – dkuchler

Bitte geben Sie an, welche Version von IE Sie verwenden. – thejartender

IE7 und IE6 haben eine variety of problems mit Elementen, die sowohl float und clear auf sie haben. In IE7, clear auf ein Element mit float verwendet löscht nur den Schwimmer unter anderen Schwimmer in die gleiche Richtung schwebte.

Eine modifizierte Version der easyclearing Lösung mag den Trick machen, aber nicht Ihre Hoffnungen hoch. Siehe diese Seite für Details: New clearing method needed for IE7?.

Unterm Strich ist, dass Sie wahrscheinlich nicht bekommen werden dies in IE6/7 ohne Betrug zu arbeiten: die div Bewegen im Text nach unten, die divs in den Absätzen Einbettung usw.

Quelle

2009-04-27 22:48:42

Das hat mich ziemlich auf den richtigen Weg gebracht. Ich musste mich mit einem 1px-weiten unsichtbaren Div zufrieden geben, das ich über der linken Box schweben lassen kann. Das wird es unter das 1px Div schieben, dessen Höhe ich einstellen kann. Nicht begeistert von der Lösung, aber keine der anderen Problemumgehungen mit IE6 geholfen. – dkuchler

Ich bin ziemlich Sicher, das ist einer dieser seltenen Bugs in ie6, die keine reine CSS-Lösung haben.

Versuchen Sie, die IE7 mit Javascript - es kann das Problem für Sie beheben: http://code.google.com/p/ie7-js/

Quelle

2009-04-27 23:23:49 wheresrhys

Antwort

Verwandte Themen