web-dev-qa-db-de.com

IE7 Float richtige Probleme

Html =>

<!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>
</head>
<body>
  <div style='border: 1px solid red; width: 100px;'>
    <a href="#">foo</a>
    <a href="#"style="border-color: blue; float: right;">bar</a>                
  </div>
something
</body>
</html>

Ich habe Probleme mit IE7 (IE6-Unterstützung wird nicht benötigt)

Auf IE7 sieht html so aus =>
alt text http://i48.tinypic.com/saxs9d.jpg

Ich brauche es, um so auszusehen (funktioniert derzeit auf chrom/ie8) =>
alter Text http://i49.tinypic.com/2ufgbr4.jpg

Was soll ich ändern? :)

48
Arnis Lapsa

Sie müssen beide Elemente schweben und löschen.

<!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>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#" style="float:left;">foo</a>            
    <div style="clear:both;"></div>
  </div>
something
</body>
</html>

Oder setzen Sie das schwebende Element einfach so vor das normale Element:

<!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>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#">foo</a>            
  </div>
something
</body>
</html>

Kurze Erklärung:

Entschuldigen Sie mein Englisch und Zeichnen, aber hier ist kurz, wie Float und Clearing im Cross-Browser funktionieren:

Ein Element kann nach links oder rechts verschoben werden. Wenn Sie ein Element schweben lassen, drückt das Element "normalen" Inhalt nicht nach unten. Siehst du warum -

Schweben und klar:

alt text
Legende: Orange/Float Right, Blau/Float Left, Graue Linien/Trenner löschen, Rotes Rechteck/Begrenzungen

In diesem Fall haben Sie zwei Elemente aus einem Zeilentext - ein Float links und das andere Float rechts. Im Floating-Modus wird der Inhalt nicht nach unten verschoben. Wenn Sie also nicht clear:both an den grauen Linien verwenden, wird der Inhalt unten zwischen den zwei schwebenden Elementen nach oben gestapelt und ist möglicherweise nicht das, was Sie möchten.

Wenn Sie clear:both unter den Floats verwenden, wird der Inhalt unter den Floats so weit verschoben, bis das Float-Element die höchste Höhe hat. Dies wird im zweiten und dritten Abschnitt des Diagramms gezeigt.

Nur Float:

alt text
Legende: Orange/Float Right, Blau/Normaler Inhalt, Graue Linien/Die Linie, die mit dem nächsten geteilt wird, Rotes Rechteck/Begrenzungen

Der blaue normale Inhalt ist standardmäßig text-align: left;. So ist es linksorientiert. Der Float muss sich vor dem normalen Inhalt befinden, da Sie dem Browser mitteilen, dass er von dieser Zeile aus gleiten soll. 

Sie sollten verschiedene Bedingungen ausprobieren, um die Auswirkungen zu sehen: Setzen Sie den Schwebekörper nach vorne, hinten, schwenken Sie ihn nach links, geben Sie beide frei, löschen Sie rechts und links.

96
mauris

Immer hilfreich für alle IE-Float-Combos: Vergeben Sie jedem Float-Element einen display: inline;

1

Versuchen Sie die klare Korrektur nach:

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
0
Lark