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

Posted 2023-03-06

【中文标题】选择性清除 IE7 中的浮动项目

【英文标题】：selective clearing float items in IE7

【发布时间】：2012-05-27 15:53:04

【问题描述】：

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

但在 IE7 中，第 5 项浮动在第一行的第 3 项旁边，而不是浮动在新行的第 4 项旁边。任何想法如何使它适用于 IE7？

jsfiddle.net/3dSsP/4/

【问题讨论】：

最近遇到同样的问题并放弃了它，认为很少有人使用IE7，对我来说这只是一个小问题。我很想听到解决方案。谷歌搜索这个问题很困难，因为大多数结果都是关于如何在容器中包含浮点数，这是一个更常见的问题。

jsfiddle.net/3dSsP/8 更新

【参考方案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;

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

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

【讨论】：

我建议使用条件 cmets 而不是 javascript。少了一种需要担心的依赖。见paulirish.com/2008/…

在这种情况下我不同意 Olly，事实上你需要一个额外的元素来支持 IE7，对我来说最好保持你的标记语义并避免为所有浏览器添加这个额外的元素，只需插入它IE7。只要您的 JS 组织良好，依赖项就不会成为问题。删除对 IE7 的支持只是在一个地方删除 JS，而不是在整个 html 中每次出现。但总的来说，HTML 元素 FTW 上的条件 cmets！

重新阅读您的帖子后，我完全同意！我站（坐）更正了 :) 当然，这些条件类更容易专门针对 IE7（等）使用 javascript，所以也许混合方法是最好的选择！