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

Question

我有一个包含 5 个项目的列表，这些项目向左浮动，并内联显示。在第 4 项上，我设置了 clear left，从而导致第 4 项进入新行。

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

jsfiddle.net/3dSsP/4/

score 1 · Accepted Answer

我遇到过很多次，不幸的是我知道的唯一解决方案是有一个单独的清除元素来清除浮动。

它很丑，但它有效：

<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 像素高，否则它将是当前字体大小的高度（耶！）。

由于这仅适用于 IE7，因此我会保持您的标记干净，并使用 javascript 动态添加这个额外的 guff，仅适用于 < IE8。

1 回答 1