firefox 2和seamonkey的css clearfix问题

因此,如果你看一看最初的文章,这篇文章促进了对所有内容的明确定位,你会注意到作者建议,由于该修复已经过时,读者应该看一篇关于SitePoint的文章。这篇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>
   ... floated content ...
   <div style="clear:both"></div>
</div>

顺便说一句,声称这破坏了语义的纯粹主义者是不正确的。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;
 }

似乎这是一个bug,并在较新版本中修复。但是,为了保持兼容性,必须使用表而不是CSS。