Question

可能重复：
Firefox body margin bug?

我以前遇到过垂直填充问题，并且当我解决它时我以为我理解了这一切。但同样，我被卡住了......

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

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

<!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>

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

但是，当我在 Firefox 中尝试时，第一个div现在已经在页面中间隔开了。这与第二个divs margin-top参数直接相关。增加该值将增加整个<body>元素的上边距，即使其样式未被更改。

现在我了解:after和content: "\0020"部分是clearfix的一部分，我承认不会100％完全依赖 clearfixes 和< em>浮动但我感到不安的是，上述代码在两个主要浏览器中的表现会有所不同。

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

编辑：正如BoltClock指出的那样，这看起来是一个长期的重复（自FF2起）FireFox bug -

Answer 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/

Answer 2

我认为最简单的解决方案，虽然不确定你将在哪里使用它是删除div上留下的文字。它将保持左对齐，不是必需的。

我不了解跨浏览器的CSS顶级保证金行为

2 个答案: