IE7 und IE8: Float-Clearing ohne Hinzufügen leerer Elemente
Ich habe ein ähnliches Problem wie das hier beschriebene (ohne Lösung):
IE7 float und clear auf dem gleichen Element
Der folgende HTML-Code wird wie in Firefox vorgesehen wiedergegeben, jedoch nicht in (beiden) IE7 und IE8:
<html>
<head>
<style>
ul {
list-style-type: none;
}
li {
clear: both;
padding: 5px;
}
.left {
clear: left;
float: left;
}
.middle {
clear: none;
float: left;
}
.right {
clear: right;
float: left;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li class="left">2</li>
<li class="right">3</li>
<li class="left">4</li>
<li class="middle">5</li>
<li class="right">6</li>
<li>7</li>
</ul>
</body>
</html>
Dies ist ein Formularlayout, und in Firefox sehen die Ergebnisse folgendermaßen aus:
1
2 3
4 5 6
7
Das ist, was ich will. In IE7 und IE8 sind die Ergebnisse jedoch:
1
2 3 5 6
4
7
[Hinweis: Ich möchte nichts nach rechts verschieben, da die Felder in meinem Formular korrekt linksbündig ausgerichtet werden sollen, ohne dass ein riesiger Abstand zwischen den verschobenen Feldern vorhanden ist, um die Breite des übergeordneten Containers zu berücksichtigen.]
Anscheinend brauche ich eine vollständige Löschung und kann wahrscheinlich ein leeres Listenelement zur Liste hinzufügen, um die Löschung zu erzwingen, aber das scheint eine dumme Lösung zu sein, die den Zweck irgendwie zunichte macht.
Irgendwelche Ideen? Ich habe ein paar Stunden damit verbracht, zu lesen und verschiedene Optionen auszuprobieren, ohne Erfolg.