FireFox中的边距问题

Question

我在Firefox浏览器中遇到了边距问题，而其他浏览器却没有出现这个问题。以下是我的HTML代码：

//*** 表示一些代码

<header>
    <div class="left">
        <div class="logo">
            //***
        </div>
    </div>

    <div class="right">
        <div id="log-on">
            //***
        </div>
    </div>
    <div class="clear"></div>
</header>
<section class="search-seaction">
    //***    
</section>

CSS：

.clear { clear:both; }

.left { float: left }

.right { float: right }

.search-seaction
{
    margin-top: 62px;        
}

以下是屏幕截图:

Firefox:

Opera & Chrome:

只有在Firefox中才会在标题上方出现那个边距。这种行为的原因是什么呢？

问题：当我给section添加margin时，标题也受到了影响。

- Artur Keyan

---

我在本地开发了它，没有任何链接。 - Artur Keyan

也许如果你使用CSS重置，就可以摆脱这种奇怪的行为 - Mansuro

你是否使用了CSS重置？不同的浏览器对于边距、内边距等有不同的默认值... - Romain Meresse

我已经使用了CSS重置。 - Artur Keyan

似乎是 Firefox 的一个 bug，它仅复制了前一个元素的 margin，非常奇怪。ramblex 的解决方案似乎是一个很好的解决方法。 - ptriek

Answer 1

尝试给标题栏设置高度：

header {
  height: 100px;
}

（将overflow设置为hidden也可以起到同样的效果。）

header {
  overflow: hidden;
}

- ramblex

---

我有一个类似的问题。将高度设置为100%非常完美。谢谢。 - Adam C

Answer 2

你也可以通过使用另一种clearfix来修复它：

http://jsfiddle.net/dXskZ/1/

- ptriek

Answer 3

是的，这种情况确实会发生。为了解决它，您可以使用重置样式表。重置样式表示例

- Yanki Twizzy

Answer 4

我使用了CSS：overflow: auto来代替，这样头部就可以正常工作了。但是我无法解释为什么。

- Artur Keyan

Answer 5

尝试将以下代码添加到您的CSS中。

*{
margin:0;
padding:0;
}

或者

html,body{
margin:0;
padding:0;
}

或者两者都可以

- Code Lover

---

请提供实时网址或HTML和CSS。 - Code Lover