Question

我正在使用yaml进行布局，并使用着名的clearfix css来确保带有浮点数的容器得到扩展。

Firefox 3，IE6，IE7，IE8，Opera 9和谷歌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（绿色）与页面的其余部分相隔很大。

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

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

Answer 1

因此，如果您查看在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，您的问题应该得到解决。

使用这种技术要记住的事情，要小心你的内部宽度，否则你可能会剪裁，重要的是将打印样式表中的包装器覆盖为溢出：可见，否则它只会打印第一页。但是我已经成功地在生产中使用这种方法多年了，我从来没有遇到任何无法解决的问题。

Answer 2

clearfix只是对懒惰或强迫性纯粹主义者的攻击。在你需要的地方放置一个空格div（在div的底部）并继续生活。

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

顺便说一句。声称这打破语义的纯粹主义者是不正确的。 HTML规范没有为<div>定义语义含义。在最坏的情况下，它混合了风格/结构，但是当将来重新设计网站并且纯粹的css解决方案变得切实可行时，移除它几乎不会成为负担。

Answer 3

我使用browsershots查看它，我正在努力弄清楚它在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;
 }

Answer 4

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

Firefox 2和SeaMonkey的CSS clearfix问题

4 个答案: