1

我有一个简单的浮动水平列表，在 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>
4

5 回答 5

2

我通过清除浮点数并添加不间断空格来解决此问题...

首先，在 CSS 文件中，我 <br />使用以下方法创建：

#clear_floats {clear:both;}

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

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

为我工作。希望这可以帮助。

于 2012-11-26T17:28:42.290 回答
0

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

body
{
    margin: 8px;
}

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

此外，代替显示：内联

 <a href="../index.html" style="background: none; float: left">
于 2009-12-08T21:22:22.990 回答
0

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

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

于 2009-12-08T21:05:58.547 回答
0

我不认为这是他遇到的。发现这个帖子有类似的问题。

例如，如果您采用 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 添加宽度，但仍然获得了空间。

于 2009-12-08T20:43:47.390 回答
0

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

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

于 2009-12-08T04:52:19.097 回答