Question

我有一个简单的浮动水平列表，在IE和Opera中看起来不错，但Firefox顶部有额外的填充或边距，我不知道如何解决..它看起来很好，直到我不得不添加显示：由于另一个问题内联到它旁边的图像链接，所以我认为它与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>

Answer 1

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

首先，在CSS文件中，我使用：

创建了<br />

#clear_floats {clear:both;}

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

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

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

Answer 2

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

通常，当您混合浮动内容和内联流内容时，您必须将正确浮动的内容放在流内容之前，或者它往往会跳到您当前正在写入的内容下面的下一个文本行。。这会影响IE比使用Firefox更糟糕。

Answer 3

我不认为这就是他所遇到的。发现此帖有类似问题。

如果你采取浮动：例如，将它放在下一个div上面理论上它们应该是并排的。现在为这两个div添加一个h1标签或者其他东西，你会在firefox中看到float：right div将在它上面有双重填充或额外的填充。即使您将边距和填充设置为零，也存在这种情况。

e.g。

< 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中添加一个宽度，但仍然有空间。

Answer 4

解决了我遇到的问题，它可以解决你的问题。我的右浮动在顶部有额外的空间，即使两个并排的div具有相同的h1标签。为了解决这个问题，我简单地将零顶部填充和零上边距添加到浮动中的h1，从而使其在顶部同样冲洗，左边的h1不浮动。

也许为您的UL或LI添加一些零填充和保证金将解决您的问题。

Answer 5

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

body
{
    margin: 8px;
}

这使得浏览器边距保持一致，每个浏览器都有自己的默认边距，在开始编码之前你应该先重置，因为我没有其余的代码，这可能就是问题。

此外，而不是显示：内联

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

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

5 个答案: