0

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

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渲染的屏幕截图。

更新： BrowserShots.org 上的截图

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

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

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

4

4 回答 4

1

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

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

于 2009-08-10T12:58:34.773 回答
0

clearfix 只是懒惰或痴迷的纯粹主义者的黑客。在需要的地方（在 div 的底部）放置一个 clearing div，然后继续生活。

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

顺便提一句。声称这破坏语义的纯粹主义者是不正确的。HTML 规范没有为<div>. 在最坏的情况下，它混​​合了样式/结构，但当将来重新设计网站并且纯 css 解决方案变得实用时，它几乎不会成为一个负担。

于 2009-08-09T13:32:51.080 回答
0

我使用浏览器截图查看了它，我非常努力地弄清楚它在 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;
 }
于 2009-08-09T17:06:51.027 回答
0

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

于 2010-08-02T17:00:06.080 回答