选择性清除IE7中的浮动项目

Question

我有一个包含左侧浮动的5个项目的列表，并以内联方式显示。 在第4项上，我向左设置了清除，从而使第4项成为新行。

但是在IE7中，第5项浮动在第一行的第3项旁边，而不是浮动在新行的第4项旁边。任何想法如何让这个为IE7工作？

测试：http://jsfiddle.net/3dSsP/4/

Answer 1

我经历了很多次，不幸的是，我所知道的唯一解决方案就是有一个单独的清除元素来清除浮动。

它很难看，但它有效：

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li class="clear">&nbsp;</li>
  <li>List 4</li>
  <li>List 5</li>
</ul>

CSS：

.clear{
  display: block;
  float: none;
  clear: both;
  height: 1px;
  line-height: 1px;
  font-size: 1px;
}

和字体声明将确保清除div只有1像素高，否则它将是当前字体大小的高度（yay！）。

因为这只适用于IE7，所以我会保持你的标记干净并使用javascript动态添加这个额外的guff for just＆lt; IE8。