Firefox 中的保证金问题答案

【问题标题】：margin issue in FireFoxFirefox 中的保证金问题
【发布时间】：2011-12-05 23:12:43
【问题描述】：

我在 Firefox 中有一个边距问题，它完全可以在其他浏览器中运行，所以这是我的 HTML

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;        
}

这里是截图

火狐：

Opera 和 Chrome：

页眉上的边距仅在 Firefox 中出现。这种行为的原因是什么？

ISSUE : 当我给部分留出边距时，标题是“margining”

【问题讨论】：

您省略的 HTML 位可能很重要。如果可以，请发布指向它的链接。
我是在localhost开发的，没有链接
也许如果你使用 css 重置，你会摆脱这种奇怪的行为
您使用的是 CSS 重置吗？浏览器对边距、填充等有不同的默认值...
我已经用过css reset

标签： html css firefox

【解决方案1】：

尝试给标题一个高度：

header {
  height: 100px;
}

（将溢出设置为隐藏也可以）

header {
  overflow: hidden;
}

【讨论】：

我遇到了类似的问题。将高度设置为 100% 效果很好。谢谢。

【解决方案2】：

您也可以使用另一个 clearfix 来修复它：

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

【讨论】：

【解决方案3】：

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

*{
margin:0;
padding:0;
}

或

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

或两者兼而有之

【讨论】：

请提供实时 url 或 html 和 css

【解决方案4】：

是的，它确实发生了。要解决它，您可以使用重置样式表。 Reset Stylesheet sample

【讨论】：

【解决方案5】：

我没有使用 Css: overflow: auto 作为标题，它正在工作。但我无法回答为什么

【讨论】：