IE7 schweben richtige Probleme
-
10-07-2019 - |
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 =>
Ich brauche es so aussehen (funktioniert auf Chrom / IE8 im Moment) =>
Was soll ich ändern? :)
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:
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:
Legende: Orange / Float rechts, blau / Normalgehalt, graue Linien / die Zeile, die mit der nächsten, Rot Rect / Grenzen
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;
}