Css Firefox浮动<；ul>；。。。额外的顶部填充或边距，即使在默认重置之后？

我有一个简单的浮动水平列表，在IE和Opera中看起来不错，但Firefox顶部有额外的填充或空白，我不知道如何修复。。因为另一个问题，我不得不在它旁边的图像链接中添加display:inline，这看起来还不错，所以我认为这与display属性有关。。有什么想法吗？在过去的八个小时里我一直在想这个问题

#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>

#标题{
背景：url（../Images/header_bkg.png）repeat-x；
宽度：800px；
高度：125px；
位置：相对位置；
}
#标题ul{
列表样式类型：无；
保证金：0；
填充：0；
浮动：对；
}
#头李{
浮动：左；
填充：0 6px 0；
保证金：0；
}
#标题a，#标题a:已访问{
字体系列：Verdana、Arial、Helvetica、无衬线；
字体大小：.7em；
颜色：#333333；
文字装饰：无；
填充：2px；
显示：块；
}
#标题a：悬停{
字体大小：.7em；
颜色：#FFFFFF；
背景：#DCAD33；
文字装饰：无；
显示：块；
}











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

通常，在混合浮动内容和内联流内容时，必须将正确的浮动内容放在流内容之前，否则它会跳到当前正在写入的文本行下方的下一行。这对IE的影响比Firefox更严重。
我不认为他遇到过这种情况。发现此帖子存在类似问题

如果你拿一个float:right举例来说，把它放在下一个div上面，理论上它们应该并排。现在，在这两个div中添加一个h1标记或其他内容，您将在firefox中看到float:right div上面有两个填充或额外填充。即使将边距和填充设置为零，也会存在这种情况

e、 g


头朝右


头部左侧


奇怪的是，您可以在div周围添加一个不浮动的边框（我的示例左侧），并将其设置为1px纯白，这样它在视觉上不可见，并且会抵消额外的空间。。。。我不明白为什么它会在那里。我甚至尝试在左侧非浮动div中添加一个宽度，但仍然获得了空间。
解决了我遇到的问题，它可能会修复您的问题。我的右浮动在顶部有额外的空间，即使两个并排的div都有相同的h1标签。为了解决这个问题，我简单地将零顶部填充和零顶部边距添加到浮动中的h1，从而使其在顶部与左侧非浮动的h1相同地齐平

也许在UL或LI中添加一些零填充和边距可以解决您的问题。
我必须做两个更改以使所有浏览器看起来相同：

body
{
    margin: 8px;
}
这使得浏览器的边距对齐，每个浏览器都有自己的默认边距，在开始编码之前，您应该先重置它，因为我没有剩下的代码，这可能是问题所在

另外，不是显示：inline

 <a href="../index.html" style="background: none; float: left">
我通过清除浮点数并添加一个非中断空格修复了此问题

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

：

#clear_floats {clear:both;}

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

<div id="clear_floats">&nbsp;</div>



为我工作。希望这能有所帮助。
哦，耶。。我得到的空间在右边的框中（浮动），加在左边非浮动框上的边框抵消了右边浮动框上多余的重影空间。。。。
<div id="clear_floats">&nbsp;</div>