边距在 Firefox 中无法正常工作
我有一个非常奇怪的问题，我一生都可以解决。基本上，在 Safari 中，我的顶部导航没有上边距，并且与页面的最顶部齐平。在 Firefox 中，它也将底部边距应用于顶部，原因我不明白。当我删除萤火虫中的边距时，假顶部边距也被删除。
请转到 Firefox 中的页面看看我的意思。如果您有萤火虫，请禁用#main-navigation 上的边距属性，您将看到发生了什么。
编辑：忘记包含网站链接： 链接
这是代码：
<body>
<div id="page-wrap">
<ul id="main-navigation">
<li><a href="/" id="home-link<?php if (is_home()) { echo '-active'; } ?>" class="main-nav-link">Home</a></li>
<li><a href="/is" id="about-link<?php if (is_page("About")) { echo '-active'; } ?>" class="main-nav-link">About</a></li>
<li><a href="/discusses" id="articles-link<?php if (is_page("Articles")) { echo '-active'; } if (is_single()) { if (in_category( 3, $post->ID )){ echo '-active'; } } ?>" class="main-nav-link">Articles</a></li>
<li><a href="/does" id="portfolio-link<?php if (is_page("Portfolio")) { echo '-active'; } if (is_single()) { if (in_category( 4, $post->ID )){ echo '-active'; } } ?>" class="main-nav-link">Portfolio</a></li>
<li><a href="/listens" id="contact-link<?php if (is_page("Contact")) { echo '-active'; } ?>" class="main-nav-link">Contact</a></li>
<li><a href="/rss" id="feeds-link" class="main-nav-link">Feeds</a></li>
<div class="clear"></div>
</ul>
还有 CSS：
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Trebuchet, sans-serif; font-size: 13px; color: #2a2a2a;
border-top: 4px solid #f2f2f2;
}
#page-wrap { width: 600px; margin: 0 auto; }
#main-navigation { display: block; position:relative; clear: both; margin: 0 -10px 48px -10px; }
#main-navigation li { float: left; height: 30px; }
#main-navigation li a { display: block; cursor: pointer; margin-right: 28px; height: 30px; text-indent: -9999px; background: url(/images/storminkSprite.png) no-repeat; background-color: transparent; }
我真的不知道是什么要做更多的事情，我一整天都在尝试解决这个问题，但我完全没有想法，所以我真的希望有人可以提供帮助。
I'm having a very weird problem that for the life of me I can solve. Basically, in Safari my top navigation has no top margin and is flush with the very top of the page. In firefox, it is applying the bottom margin to the top as well, for a reason I cannot figure out. When I remove margin in firebug, the fake top margin is also removed.
Please, just goto the page in firefox to see what I mean. If you have firebug, disable the margin property on the #main-navigation and you'll see what is happening.
EDIT: Forgot to include link to site: Link
Here's the code:
<body>
<div id="page-wrap">
<ul id="main-navigation">
<li><a href="/" id="home-link<?php if (is_home()) { echo '-active'; } ?>" class="main-nav-link">Home</a></li>
<li><a href="/is" id="about-link<?php if (is_page("About")) { echo '-active'; } ?>" class="main-nav-link">About</a></li>
<li><a href="/discusses" id="articles-link<?php if (is_page("Articles")) { echo '-active'; } if (is_single()) { if (in_category( 3, $post->ID )){ echo '-active'; } } ?>" class="main-nav-link">Articles</a></li>
<li><a href="/does" id="portfolio-link<?php if (is_page("Portfolio")) { echo '-active'; } if (is_single()) { if (in_category( 4, $post->ID )){ echo '-active'; } } ?>" class="main-nav-link">Portfolio</a></li>
<li><a href="/listens" id="contact-link<?php if (is_page("Contact")) { echo '-active'; } ?>" class="main-nav-link">Contact</a></li>
<li><a href="/rss" id="feeds-link" class="main-nav-link">Feeds</a></li>
<div class="clear"></div>
</ul>
And the CSS:
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Trebuchet, sans-serif; font-size: 13px; color: #2a2a2a;
border-top: 4px solid #f2f2f2;
}
#page-wrap { width: 600px; margin: 0 auto; }
#main-navigation { display: block; position:relative; clear: both; margin: 0 -10px 48px -10px; }
#main-navigation li { float: left; height: 30px; }
#main-navigation li a { display: block; cursor: pointer; margin-right: 28px; height: 30px; text-indent: -9999px; background: url(/images/storminkSprite.png) no-repeat; background-color: transparent; }
I really have no idea what to do anymore, I've been trying to fix this one problem all day and I'm completely out of ideas, so I really hope someone can help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
看起来边距属性表现得很奇怪..它一定是代码中的东西..快速解决方法是添加填充属性，
这对我来说效果很好
it seems that the margin propriety is acting wierd..it must be something in the code though.. the quick fix would be to add the padding propriety
this works fine to me
您可以尝试使用
我不知道为什么 margin 会这样做，但这种快速解决方法应该没问题。
you could try using
I have no clue as to why margin is doing that but this quick workaround should be fine.