Wie behebe ich dieses einfache CSS floating Problem in IE?

StackOverflow https://stackoverflow.com/questions/477157

Frage

Ich habe vier div Elemente links schwebte bekam. Die dritte div wird gelöscht.
In den folgenden und Chrom sind die Elemente, wie erwartet positioniert. Die erste und die zweite divs benachbart zueinander sind, und sind oberhalb der dritten und vierten divs, die zueinander benachbart sind auch
IE7 auf der anderen Seite stellt den vierten div benachbart zu dem ersten und zweiten divs mit dem dritten div unten.

Ich weiß, ich kann es beheben, indem ein br Element nach dem zweiten div Zugabe aber ich mag lieber nicht das Markup bearbeiten, wenn ich nicht haben. Gibt es eine elegantere Möglichkeit, das Problem der Festsetzung?

Ich habe für eine Korrektur für eine Weile zu Google versucht, jetzt haben, aber nicht einen gefunden, was ziemlich überraschend, wenn man bedenkt, wie elementar das Problem zu sein scheint. Vielleicht bin ich etwas fehlt offensichtlich, gibt es eine Referenz-Website, die so eine einfache CSS Probleme aufgelistet oder bin ich nur unwissend über grundlegende CSS?

Edit: Ich habe der Beispielcode etwas komplizierter gemacht, nachdem Nazgulled "gelöst" das Problem (die Kommentare sehen). Es gibt jetzt vier divs anstelle von drei und der dritte div wird anstelle des zweiten gelöscht.

Dies ist die komplette Quelltext: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>IE Float Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            div
            {
                width: 100px;
                height: 100px;
                color: white;
                font-size: 3em;
                float: left;
            }

            #divone
            {
                background-color: red;
            }

            #divtwo
            {
                background-color: blue;
            }

            #divthree
            {
                background-color: green;
                clear: both;
            }

            #divfour
            {
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <div id="divone">one</div>
        <div id="divtwo">two</div>
        <div id="divthree">three</div>
        <div id="divfour">four</div>
    </body>
</html>

Hier ist, was aussieht wie in Chrome:
Chrome Probe

Hier ist, was aussieht wie in IE7:
IE Sample

War es hilfreich?

Lösung 2

Einige Monate später ...

gab ich zu versuchen, dieses Problem mit CSS allein zu lösen. Dies ist ein IE7 Fehler, die Sie nicht ohne sie zu berühren Ihre HTML zu vermeiden.

Die endgültige Anwendung dieses Musters floating war in einer Form, in der zwei der divs waren Eingangselemente und die anderen beiden waren divs ihren entsprechenden Etiketten. Das Muster wurde mehrere Male in einer großen Form verwendet, und ich wollte wirklich eine elegante CSS-only Lösung finden.

Ich landete schließlich in der Oriented CSS-Framework Objekt und Verpackung alle Elemente mit zusätzlichen divs, um das gewünschte Layout, wie OOCSS Diktat zu schaffen. Es war der einzige Weg, um meine Seele von IE7 CSS Hölle zu retten und OOCSS ist nicht so schlecht, wenn Sie Ihr erstes Layout abzuschließen.


In Wahrheit ist die allgemeine Antwort, dass dies die Art von Frage, die Sie stellen, wenn Sie nicht wirklich wissen, was Sie mit CSS tun. Wenn Sie ein komplexes Layout einmal in einem blauen Mond zu schaffen, dann haben Sie wahrscheinlich nicht wissen, was du tust; wie es der Fall, wenn ich diese Frage gestellt.

Auch wenn es stimmt, dass IE7 nicht die CSS richtig zu machen, es war auch ein Fall von falschem Umfang meinerseits. CSS ist nicht die ultimative Layout-Sprache, die ein naiver Programmierer es aus machen würde zu sein und CSS ist nicht wirklich unabhängig von der Struktur Ihres HTML. Wieder einmal habe ich entschieden, den einfacheren Weg herausnehmen, indem Sie den OOCSS Rahmen zu verwenden, wenn ich sollte eigentlich die Zeit nehmen, die Grundlagen der CSS zu lernen.

Ach, so ist die Folge der Fristen.

Andere Tipps

Ich weiß nicht, ob dies Ihr wirkliches Problem behebt, aber ich fixiert Ihre Probe wie folgt aus:

  • Entfernen Sie die float Attribut von div
  • Entfernen Sie die klar Attribut von #divtwo
  • Fügen Sie float: left #divtwo und #divthree

Dies macht es wie Ihre Chrom Probe aussieht sowohl in Firefox und IE 7 (Browser I getestet).

Ich bin nicht sicher, was Ihr Ziel ist hier, aber ich würde alle vier <div>s in einem Containerelement vorschlagen umschließt und eine Breite, um es anwenden, dann den clear Stil von #divthree entfernen. es auf diese Weise tun #divthree und #divfour ermöglicht unter #divone und #divtwo ohne Clearing sie zu bewegen: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>IE Float Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
                #divone, #divtwo, #divthree, #divfour
                {
                        width: 100px;
                        height: 100px;
                        color: white;
                        font-size: 3em;
                        float: left;
                }

                #divone
                {
                        background-color: red;
                }

                #divtwo
                {
                        background-color: blue;
                }

                #divthree
                {
                        background-color: green;
                }

                #divfour
                {
                        background-color: purple;
                }

                #container {
                        width: 200px;
                        zoom: 1;
                }
        </style>
    </head>
    <body>
    <div id="container">
        <div id="divone">one</div>
        <div id="divtwo">two</div>
        <div id="divthree">three</div>
        <div id="divfour">four</div>
    </div>
    </body>
</html>

Die zoom Eigenschaft auf #container ist notwendig, um die IE6 / 7 Escaping Floats Bug zu vermeiden .

Wenn die obige Lösung nicht durchführbar ist, können Sie ein <br> oder <div> nach #divtwo mit dem Stil clear: left; hinzufügen: 

<div id="divone">one</div>
<div id="divtwo">two</div>
<br style="clear: left;" />
<div id="divthree">three</div>
<div id="divfour">four</div>

Dies ist die Technik in einem schwebenden Seitenlayout Beispiel verwendet auf westciv.com .

Versuchen Sie fügt hinzu: 

display:inline-block;

in #divtwo. Wenn das funktioniert, ich würde natürlich etwas bedingte Kommentierung für IE7 hinzufügen

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top