У меня проблема, аналогичная описанной здесь (без разрешения):
IE7 плавать и очистить на том же элементе
Следующий HTML-код отображается так, как задумано в Firefox, но не в (обоих) IE7 и 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>
Это макет формы, и в Firefox результаты выглядят так:
1
2 3
4 5 6
7
Вот к чему я иду. В IE7 и IE8, однако, результаты:
1
2 3 5 6
4
7
[Примечание: я не хочу плавать что-либо вправо, потому что я хочу, чтобы поля в моей форме были выровнены по левому краю правильно, без огромного пространства между плавающими полями для учета ширины родительского контейнера.]
Очевидно, мне нужен полный очистить, и, возможно, я могу добавить пустой элемент списка в список для принудительной очистки, но это похоже на глупое решение и в некотором роде побеждает цель.
Есть идеи? Я провел несколько часов, читая и пробуя разные варианты, но безуспешно.