0

可能重复：
Firefox 正文边距错误？

我之前一直被垂直填充问题所困扰，并认为当我解决它时我理解了这一切。但又一次，我被困住了......

我正在玩一些现有的主题，看看它们是如何工作的，并遇到了一个问题，即Win7上的Firefox 17和Google Chrome 23之间存在重大不一致。

我已将代码缩小到下面的小片段。（我内联了一些样式以节省空间）。

<!DOCTYPE html >
<head>
    <style type="text/css">
        .container:after{
            content: "\0020";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
  <div class="container" style="background:#0f0;">
    <div style="float: left;" >Words</div>
  </div>
  <div style="background:#f00; margin-top: 100px;">Words</div>
</body>
</html>

如果我在Google Chrome（或IE 8 ）中尝试上述操作，它的行为与我预期的一样。第一个顶级 div 位于页面顶部，第二个顶级 div 在其下方，由于其顶部边缘样式而隔开。

但是，当我在Firefox中尝试时，第一个 div 现在已在页面下方隔开。这与 2nd divs margin-top 参数直接相关。增加该值将增加整个<body>元素的上边距间距，即使它的样式没有改变。

现在我明白:afterandcontent: "\0020"部分是 a 的一部分clearfix，并且我承认还没有 100% 了解clearfixes和floats，但我很不安上面的代码在 2 个主要浏览器中的行为会如此不同。

有人可以告诉我我在这里缺少什么以及为什么行为不同吗？

编辑：正如 BoltClock 所指出的，这看起来是一个长期存在的（自 FF2 以来）FireFox错误的副本-

4

2 回答 2

1

我无法真正解释为什么会有差异，但我可以为您提供可以帮助您解决这个问题的修复程序。添加overflow:hidden;到浮动的容器中。

<div class="container" style="background:#0f0; overflow: hidden;">

这将起作用

.container:after{
            content: "\0020";
            display: block;
            clear: both;
            overflow: hidden;
}

http://jsfiddle.net/g3Avj/1/

于 2012-11-29T18:33:41.460 回答
0

我认为最简单的解决方案，虽然不确定你会去哪里是用文字删除 div 上留下的浮动。它将保持左对齐并且没有必要。

于 2012-11-29T18:35:12.963 回答