Firefox 2 和 SeaMonkey 的 CSS clearfix 问题

Question

我正在使用 yaml布局和著名clearfix css确保带有 float 的容器得到扩展。

Firefox 3、IE6、IE7、IE8、Opera 9 和 Google Chrome 一切正常，但我在 Firefox 1、Firefox 2 和 SeaMonkey 上遇到问题。问题是 clearfix 容器扩展得太多，正如您在网站上看到的那样:

http://www.slagalica.tv/game/mojbroj

这里是 Firefox 2 的截图和 Firefox 3渲染。

更新: Screenshots on BrowserShots.org

不幸的是，统计数据显示超过 10% 的访问者正在使用 FF2，所以我不能简单地忽略这个问题。我尝试删除或调整 clearfix CSS 的某些部分，但无论我做什么，计时器 DIV(绿色)都与页面的其余部分分开很大。

有没有人知道如何解决这个问题？

更新 2:我终于放弃并放置 TABLE 标签并在几分钟内解决了问题。所以，不要试图查看 HTML 源代码 - 问题不再明显。

Answer 1

因此，如果您查看在 positioniseverything 上宣传 clearfix 的原始文章，您会注意到作者建议，由于修复程序已过时，读者应该查看 sitepoint 上的一篇文章。 This sitepoint article指出了一种我已经使用了很长时间的方法。

非常简单，如果您给父级 overflow: hidden 并确保它在 IE 中具有“布局”，那么这将清除内部 float 。

<div id="wrapper">
     <div id="leftcol">
          Text
     </div>
     <div id="rightcol">
         text
     </div>
</div>

然后是对应的CSS:

#wrapper{
  overflow:hidden;
  width: 100%;
}
#leftcol{
  float:left;
  width: 50%;
}
#rightcol{
  float:right;
  width: 50%;
}

在上面的示例中，我使用了 width: 100% 来为 IE 提供布局，但您也可以轻松地使用 zoom: 1 或 height: 1% 如果您愿意。

尝试用这种技术替换 clearfix，您的问题应该得到解决。

使用此技术时要牢记的事项，请注意内部宽度，否则可能会被剪裁，重要的是将打印样式表中的包装器覆盖为 overflow: visible ，否则它只会打印第一页。但我多年来一直在生产中成功使用这种方法，而且我从未遇到过任何无法解决的问题。