Firefox 在错误的元素上添加边距答案

【问题标题】：Firefox adds margin on the wrong elementFirefox 在错误的元素上添加边距
【发布时间】：2013-09-24 05:02:15
【问题描述】：

今天我遇到了这段代码。它可以像我在 Chrome 中所期望的那样工作，但是它在 Firefox 的错误元素上添加了边距：

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Site Title</title>
    <style type="text/css" media="screen">
    body {
      background-color: #aaa;
      margin: 0;
    }
    #header {
      background-color: #fff;
    }
    #logo {
      float: left;
    }
    #menu {
      float: right;
    }
    .container {
      width: 960px;
      margin: 0 auto;
    }
    .main {
      margin-top: 36px;
    }
    .clear {
      clear: both;
    }
    </style>
  </head>
  <body>
    <div id="header">
      <div class="container">
        <div id="logo">Logo</div>
        <div id="menu">Home</div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="container main">
       Content
    </div>
  </body>
</html>

Firefox 似乎将 .main 规则中的边距添加到预期的内容 div 以及标题 div 中。

如果我在标题中添加一些文本，它将按预期工作，并且标题不会有那个边距：

<div id="header"> Some text here
  <div class="container">
    <div id="logo">Logo</div>
      <div id="menu">Home</div>
      <div class="clear"></div>
    </div>
  </div>
</div>

我还可以在标题块之后添加一些文本，它也可以用于 Firefox。

我不明白为什么 Firefox 会在页眉元素中添加该边距。

【问题讨论】：

试着用它制作一个jsfiddle.net
需要将header的padding和margin设置为0；
填充和边距似乎没有任何改变。我创建了一个 jsfiddle jsfiddle.net/VfAq7
@Fakito 尝试添加一些 height 到 header ，example。
我通过在 .header 中添加 min-height: 1em 来修复它，但它仍然感觉很糟糕。看来 Firefox 毕竟不应该增加那个边距。

标签： html css firefox

【解决方案1】：

很奇怪的问题，我不明白为什么会这样。

但是，当您将至少 1px 的 padding 添加到 .container 时，它似乎会有所帮助。

同时检查this demo。

【讨论】：

【解决方案2】：

问题与自动高度和浮动子级的容器有关......

将display:inline-block; 添加到#header 将使其适用于所有浏览器（除了旧的IE），也会在白框中包含右浮动的div（现在不是），并将继续调整高度自动。

小提琴：http://jsfiddle.net/AndreaLigios/VfAq7/1/

【讨论】：

这似乎修复了标题，但元素的宽度设置为 960px，这是容器的宽度，并且它没有设置边距，因此元素没有对齐。
我不明白；我看到的唯一区别是边距消失了，所有 div 的背景都是白色的，而且不仅达到可用的屏幕尺寸（尝试用一个小的小提琴窗口运行它们并使用水平滚动条移动)
将容器的宽度设置为 260px 以了解我的意思。标题元素不会居中，因为边距是在容器中设置的，所以我也需要将边距设置为标题。