2

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

4

2 回答 2

0

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

添加display:inline-block;到#header将使它在每个浏览器中都可以工作（除了旧的 IE），也会在白框中包含右浮动的 div（现在不是），并将继续自动调整高度。

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

于 2013-09-19T08:23:30.917 回答
0

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

但是，当您将padding至少 1px 的 a 添加到.container.

还要检查这个演示。

于 2013-09-19T08:05:58.427 回答