Seltsam Schwimmer Verhalten in IE7

Question

Ich möchte eine einfache Box mit einer Kopfleiste erstellen einen Titel und einige Schaltflä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

Allerdings total vermasselt IE7 und legt das Recht auf die rechts auf der Seite Floats:

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

Kann man das beheben?

Answer 1

Geben Sie Breite in äußerster div. Wenn diese Breite in Ihrem Inhalt div bedeutet dies die gesamte Breite der Box ist, einfach fügen Sie es zum ä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

Das ist nur eine schnelle Antwort, so halte ich meine Hände, wenn es ganz funktioniert nicht. Ich denke, Marko Lösung wird wahrscheinlich funktionieren, wenn Sie nur min-width hinzufügen statt Breite. Wenn Sie auch für IE6 gerecht zu werden versuchen, müssen Sie einen Hack verwenden, da min Breite nicht von IE6 unterstützt wird und es ist Nachkommen.

So soll dies mit IE7 arbeiten und anderen modernen Browsern. Stellen Sie die min-Breite auf, was angemessen 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 3

Ich reparierte es mit jQuery das 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 4

Versuche position:relative; zu Eltern-Elemente und für das Kind-Element setzen. Es löste das Problem für mich.

Answer 5

Haben Sie vor kurzem wissen, dass die richtigen Floats mit der divs vor den anderen Elementen angehängt werden muß. Dies ist die einfachste Lösung ohne eine einzige Zeile ändern hinzugefügt wird.

<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>

Answer 6

Machen Sie diese <div style="background-color:blue; padding: 1px; height: 20px;> die Eltern der 2 Floating divs clear:all auch