我不了解跨浏览器的 CSS 上边距行为 [重复]答案

【问题标题】：I am not understanding CSS top-margin behaviour across browsers [duplicate]我不了解跨浏览器的 CSS 上边距行为 [重复]
【发布时间】：2012-11-17 21:48:18
【问题描述】：

可能重复：
Firefox body margin bug?

我之前遇到过垂直填充问题，并认为在解决它时我已经完全理解了。但又一次，我被困住了......

我正在尝试一些现有的主题以了解它们是如何工作的，并且遇到了 Firefox 17 和 Google Chrome 23 之间存在严重不一致的问题，都在 Win7 上。

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

<!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> 元素的上边距间距，即使它的样式没有改变。

现在我知道:after 和content: "\0020" 部分是clearfix 的一部分，我承认没有100% 了解clearfixes 和floats 但是，我很担心上面的代码在 2 个主要浏览器中的行为会如此不同。

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

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

【问题讨论】：

这是一个 jsfiddle：jsfiddle.net/g3Avj。这种行为肯定是不正常的。

标签： css firefox google-chrome

【解决方案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/

【讨论】：

好吧，我尝试了修复“上游”并删除了开发人员的“hack”以使其在 FF 中正常工作并在 Chrome 中中断。现在它可以正常工作了，我还没有看到任何其他工件。谢谢你的帮助。现在我只需要更多地了解你做了什么;)

【解决方案2】：

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

【讨论】：

嗯，这个简化版本是从一个包含更多 CSS 的主题中剥离出来的。左浮动的起源在该主题的 CSS 的一部分深处，我可以尝试将其撕掉，我想看看它是否会破坏其他任何东西。
我总是使用归一化重置。我使用以下重置测试了您的代码并且它有效，将 clearfix 作为类添加到容器 (class="container clearfix"): .clearfix:before, .clearfix:after { content: " ";显示：表格； } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }