Question

今天我遇到了这段代码。它可以像我在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会将这个边距添加到标题元素中。

Answer 1

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

然而，当您向padding添加至少1个像素的.container时，这似乎会有所帮助。

同时检查this demo。

Answer 2

问题与具有自动高度和浮动儿童的容器有关......

将display:inline-block;添加到#header将使其在每个浏览器中都有效（除了旧IE之外），将在白框中包含右浮动div（现在不是），并且将继续自动调整高度。

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

Firefox在错误的元素上添加了保证金

2 个答案: