Firefox 浮动...额外的顶部填充或边距，即使在默认重置后也是如此？

Question

我有一个简单的浮动水平列表，在 IE 和 Opera 中看起来不错，但 Firefox 在顶部有额外的填充或边距，我不知道如何修复。它看起来很好，直到我不得不添加一个显示：由于另一个问题，内联到旁边的图像链接，所以我认为这与显示属性有关..有什么想法吗？在过去的八个小时里我一直在试图解决这个问题。

#header {
 background: url(../Images/header_bkg.png) repeat-x;
 width: 800px;
 height: 125px;
 position: relative;
}
#header ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 float: right;
}
#header li {
 float: left;
 padding: 0 6px 0 0;
 margin: 0;
}
#header a, #header a:visited {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: .7em;
 color: #333333;
 text-decoration: none;
 padding: 2px;
 display: block;
}
#header a:hover {
 font-size: .7em;
 color: #FFFFFF;
 background: #DCAD33;
 text-decoration: none;
 display: block;
}

<div id="header">
<img src="../Images/right_header_bar.png" style="float:right" />
<a href="../index.html" style="background:none; display: inline"><img src="../Images/Scofield_logo.png" style="float:left; padding: 0 0 0 20px" /></a>
<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../Portfolio/portfolio.aspx">PORTFOLIO</a></li>
<li><a href="../Unique/ShipReady.aspx">RARITIES</a></li>
<li><a href="../custom.html">CUSTOM</a></li>
<li><a href="../trade.html">TRADE</a></li>
<li><a href="../Company.html">COMPANY</a></li>
<li><a href="../press.html">PRESS</a></li>
<li><a href="http://scofieldhistoriclighting.blogspot.com/" target="_blank">BLOG</a></li>
<li><a href="../Contact.html">CONTACT</a></li>
</ul>
</div>

Answer 1

我通过清除浮动并添加不间断空格解决了这个问题...

首先，在 CSS 文件中，我使用以下方法创建了
：

#clear_floats {clear:both;}

然后，在我的代码中，就在我的新代码之前浮动元素：

<div id="clear_floats"> </div>

为我工作。希望这有帮助。

Answer 2

鉴于上面的代码，我没有看到它。更完整的测试用例？

一般来说，当您混合浮动内容和内联流内容时，您必须将右浮动内容放在流内容之前，否则它往往会跳到您当前正在写入的文本行下方的下一个文本行。不过，这对 IE 的影响比对 Firefox 的影响更严重。

Answer 3

解决了我遇到的问题，也许可以解决你的问题。我的右侧浮动在顶部有额外的空间，即使两个并排的 div 具有相同的 h1 标签。为了解决这个问题，我简单地向浮动中的 h1 添加了零顶部填充和零顶部边距，从而使其在顶部与左侧非浮动的 h1 同等地齐平。

也许在 UL 或 LI 中添加一些零填充和边距可以解决您的问题。

Answer 4

我必须进行两项更改才能使所有这些浏览器看起来相等：

body
{
    margin: 8px;
}

这使得浏览器边距对齐，每个浏览器都有自己的默认边距，您应该在开始编码之前先行重置该边距，因为我没有其余的代码可能是问题所在。

另外，代替 display: inline

 <a href="../index.html" style="background: none; float: left">

Answer 5

我认为他没有遇到过这种情况。发现这个帖子有类似的问题。

例如，如果您采用 float:right 并将其放置在下一个 div 之上，理论上它们应该并排。现在向这两个 div 添加 h1 标签或其他内容，您将看到在 Firefox 中 float:right div 将在其上方具有双填充或额外填充。即使您将边距和填充设置为零，这种情况也存在。

例如，

< div style="float:right:margin:0;padding:0;width:280px;">
< h1>Head Right< / h1>
< /div>

< div style="margin:0;padding:0;width:300;">
< h1>Head Left< /h1>
< /div>

奇怪的是，您可以在不浮动的 div 周围添加边框（左我的示例）并将其设置为 1px 纯白色，这样它在视觉上不可见，并且它将消除额外的空间....我不明白为什么它那里。我什至尝试向左侧非浮动 div 添加宽度，但仍然有空间。