Seltsames Float-Verhalten in IE7

Question

Ich möchte ein einfaches Feld mit einer Kopfzeile erstellen, die einen Titel und einige Werkzeugschaltflächen enthält. Ich habe das folgende Markup:

<div style="float:left"> 
    <div style="background-color:blue; padding: 1px; height: 20px;"> 
     <div style="float: left; background-color:green;">title</div> 
     <div style="float: right; background-color:yellow;">toolbar</div> 
    </div> 
    <div style="clear: both; width: 200px; background-color: red;">content</div> 
</div> 

Dies macht in Firefox und Chrome:

http://www.boplicity.nl/images/firefox.jpg

jedoch IE7 total vermasselt und setzt das Recht schwebte Element rechts von der Seite:

http://www.boplicity.nl/images/ie7.jpg

Kann dies behoben werden?

Answer 1

angeben Breite. Wenn diese Breite in Ihrem Inhalt div bedeutet dies die gesamte Breite der Box ist, fügen Sie es einfach an den äußersten div und (optional) entfernen Sie es von Inhalt, wie folgt aus:

<div style="float:left; width: 200px;"> 
    <div style="background-color:blue; padding: 1px; height: 20px;"> 
     <div style="float: left; background-color:green;">title</div> 
     <div style="float: right; background-color:yellow;">toolbar</div> 
    </div> 
    <div style="clear: both; background-color: red;">content</div> 
</div> 

Answer 2

Machen diesen <div style="background-color:blue; padding: 1px; height: 20px;> der Elternteil der 2 floating divs in äußerster div auch clear:all

Answer 3

Dies ist nur eine kurze antworte, also halte ich meine Hände hoch, wenn es nicht klappt. Ich denke Markos Lösung wird wahrscheinlich funktionieren, wenn Sie nur die Breite und nicht die Breite hinzufügen. Wenn Sie versuchen, auch für ie6 zu sorgen, müssen Sie möglicherweise einen Hack verwenden, da die minimale Breite von ie6 und seinen Nachkommen nicht unterstützt wird.

Das sollte also mit IE7 und anderen modernen Browsern funktionieren. Stellen Sie die Mindestbreite auf das ein, was geeignet ist.

<div style="float:left; min-width: 200px;"> 
    <div style="background-color:blue; padding: 1px; height: 20px;"> 
     <div style="float: left; background-color:green;">title</div> 
     <div style="float: right; background-color:yellow;">toolbar</div> 
    </div> 
    <div style="clear: both; background-color: red;">content</div> 
</div> 

Answer 4

Ich reparierte es jQuery mit dem Verhalten der Nicht-IE-Browser zu emulieren:

// IE fix for div widths - size header to width of content 
    if (!$.support.cssFloat) { 
     $("div:has(.boxheader) > table").each(function() { 
       $(this).parent().width($(this).width()); 
     }); 
    } 

Answer 5

Versuchen position:relative; zu Eltern-Elemente und für das Kind-Element setzen. Es hat das Problem für mich gelöst.

Answer 6

In letzter Zeit wissen, dass die richtigen Floated-Elemente mit den Divs vor den anderen Elementen angehängt werden müssen. Dies ist die einfachste Lösung, ohne eine Änderungslinie hinzuzufügen.

<div style="background-color:blue; padding: 1px; height: 20px;"> 
    <div style="float: right; background-color:green;">title</div> 
    <div style="float: left; background-color:yellow;">toolbar</div> 
</div>