IE7 schweben richtige Probleme

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

Frage

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 ist nicht erforderlich)

Auf IE7 gerenderten html wie folgt aussieht =>
alt text

Ich brauche es so aussehen (funktioniert auf Chrom / IE8 im Moment) =>
alt text

Was soll ich ändern? :)

War es hilfreich?

Lösung

Sie müssen beiden Elemente schweben und löscht es. 

<!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 einfach gesagt das Floating-Element vor dem normalen Elemente wie folgt: 

<!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 Erläuterung:

Pardon mein Englisch und Zeichnung, aber hier ist kurz, wie Schwimmer und Räumungsarbeiten in Cross-Browser:

Ein Element kann schwebt links oder rechts sein. Wenn Sie Element haben schwimmend, wird das Element nicht nach unten „normalen“ Inhalt schieben. Sehen Sie, warum -

Float und klar:

alt text
Legende: Orange / Float rechts, blau / Float links, graue Linien / Clear Teiler, Rot Rect / Grenzen

In diesem Fall haben Sie zwei Elemente einer Zeile Text - ein Schwimmer links und der andere rechts Schwimmer. Wenn schwebend, wird es nicht um den Inhalt nach unten drückt aka Raum einnimmt. Wenn Sie also nicht clear:both an den grauen Linien verwenden, die unten Inhalt stapelt nach oben zwischen den zwei Schwimmelementen und somit kann nicht sein, was Sie wollen.

Wenn Sie clear:both unter den Schwimmern verwenden, wird der Inhalt unter den Schwimmern so weit geschoben werden, als welche auch immer Schwimmerelement der höchsten Höhe. Dies ist in dem Diagramm der 2. und 3. Abschnitt gezeigt.

Float nur:

alt text
Legende: Orange / Float rechts, blau / Normalgehalt, graue Linien / die Zeile, die mit der nächsten, Rot Rect / Grenzen

divded ist

Der blaue normale Inhalt ist bereits standardmäßig text-align: left;. So ist links orientiert. Sie müssen den Schwimmer vor dem normalen Inhalt sein, weil Sie den Browser von dieser Linie zu schweben doch sagen.

Sie sollten verschiedene Bedingungen experimentieren um seine Wirkung zu sehen: vor Schwimmer setzen, hinten, links rechts schweben, klar beide klar rechts und links

.

Andere Tipps

Immer hilfreich für alle IE-Float-Combos: Geben Sie jedem Schwimmer-Element eine display: inline;

Versuchen Sie, die klar nach fix: 

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top