IE7和IE8：浮动清除而不添加空元素 [英] IE7 and IE8: Float clearing without adding empty elements
问题描述
我遇到类似这里所述的问题（没有解决方法）：
I'm having a problem similar to the one described here (without a resolution):
在Firefox中而不是在（两者）IE7和IE8中呈现：
The following HTML renders as intended in Firefox but not in (both) IE7 and 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中，结果显示如下：
This is a form layout, and in Firefox the results appear like:
1
2 3
4 5 6
7
这就是我要的。在IE7和IE8中，结果是：
That's what I'm going for. In IE7 and IE8 however, the results are:
1
2 3 5 6
4
7
[注意：我不想向右移动任何东西，在我的窗体上的字段左对齐正确，在浮动字段之间没有巨大的空间，以解释父容器的宽度。]
[Note: I don't want to float anything to the right because I want the fields on my form to left-align correctly, without a giant space in-between the floated fields to account for the parent container's width.]
显然，我需要一个完全清除，并且可以向列表中添加一个空的列表项元素以强制清除，但是这看起来像一个愚蠢的解决方案并且打败了目的。
Apparently I need a full clear, and can probably add an empty list-item element to the list to force clearing, but that seems like a dumb solution and sort of defeats the purpose.
任何想法？
推荐答案
尝试此操作， demo ：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>list floats</title>
<style type="text/css">
li{clear: none;list-style: none}
.clearer{float: left; clear: left}
.floater{ float:left}
</style>
</head>
<body>
<ul>
<li class="">1</li>
<li class="clearer">2</li>
<li class="">3</li>
<li class="clearer">4</li>
<li class="floater">5</li>
<li class="">6</li>
<li class="clearer">7</li>
</ul>
</body>
</html>
这篇关于IE7和IE8：浮动清除而不添加空元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
