Firefox 2和SeaMonkey的CSS clearfix问题

我正在使用yaml进行布局和着名的clearfix css，以确保带有浮动块的容器得到扩展。

一切工作正常与Firefox 3，IE6，IE7，IE8，Opera 9和谷歌浏览器，但我有问题与Firefox 1，Firefox 2和SeaMonkey。 问题是clearfix容器的扩展太多了，你可以在网站上看到：

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

以下是Firefox 2和Firefox 3渲染的截图。

更新： BrowserShots.org截图

不幸的是，统计数据显示，超过10％的访问者使用FF2，所以我不能简单地忽略这个问题。 我尝试删除或调整一些clearfix CSS的部分，但无论我做什么，定时器DIV（绿色）与页面的其余部分相隔很远。

有没有人有一个想法如何解决这个问题？

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

---

因此，如果您看看在positioniseverything上推广clearfix的原始文章，您会注意到作者建议，由于修复已过时，读者应该查看sitepoint上的文章。 本站点文章指出了我现在已经使用很长时间的一种方法。

非常简单，如果你给父母溢出：隐藏并确保它在IE中有'布局'，那么这将清除内部浮动。

<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，你的问题应该被解决。

要记住这个技巧，小心你的内部宽度，否则你可能会得到裁剪，重要的是在你的打印样式表中覆盖包装作为溢出：否则它只会打印第一页。 但多年来我一直在成功地使用这种方法，并且我从未有过任何无法解决的问题。

---

clearfix只是懒惰或迷恋纯粹主义者的黑客。 在你需要的地方放置一个清理区（在你的div的底部）并且继续生活。

<div>
   ... floated content ...
   <div style="clear:both"></div>
</div>

BTW。 纯粹主义者声称这违反了语义学是不正确的。 HTML规范没有为<div>定义语义。 最糟糕的是，它将风格/结构混合在一起，但在将来重新设计网站时，移除它几乎不是一项负担，而纯粹的css解决方案变得切实可行。

---

我使用浏览器浏览它，我真的很难弄清楚它在FF2，3和Chrome之间的区别是什么。 我没有看到它。

虽然看看你的页面，为什么不按照这些方法去做？

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

和CSS：

 #wrapper{
      min-height:1%; //to fix IE6 floats escaping ancestor div
 }
 #leftcol{
      float:left;
 }
 #rightcol{
     float:left;
 }
 #foot{
 clear:both;
 }

链接地址: http://www.djcxy.com/p/15513.html

上一篇: CSS clearfix problem with Firefox 2 and SeaMonkey

下一篇: Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?