边距在 Firefox 中无法正常运行答案

【问题标题】：Margin not acting properly in Firefox边距在 Firefox 中无法正常运行
【发布时间】：2010-12-01 07:46:10
【问题描述】：

我有一个非常奇怪的问题，我可以用我的一生来解决。基本上，在 Safari 中，我的顶部导航没有上边距，并且与页面的最顶部齐平。在 Firefox 中，它也将底部边距应用于顶部，原因我无法弄清楚。当我在萤火虫中删除边距时，假的上边距也会被删除。

拜托，请转到 Firefox 中的页面，看看我的意思。如果您有萤火虫，请禁用 #main-navigation 上的边距属性，您会看到发生了什么。

编辑：忘记包含网站链接：Link

代码如下：

<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; }

我真的不知道该怎么办了，我整天都在努力解决这个问题，我完全没有想法，所以我真的希望有人能提供帮助。

【问题讨论】：

您是没有粘贴其余部分，还是您的代码以这样的方式结尾？

标签： html css firefox firebug margin

【解决方案1】：

似乎margin propriety 行为怪异..它必须是代码中的东西.. 快速解决方法是添加padding propety

#main-navigation { display: block; position:relative; clear: both; margin: 0 -10px 0 -10px; padding-bottom:48px; }

这对我来说很好用

【讨论】：

【解决方案2】：

#main-navigation {margin-bottom:0px!important;}

【讨论】：

【解决方案3】：

你可以试试

padding-bottom: 45px and margin-left: -10px

我不知道为什么 margin 会这样做，但是这个快速的解决方法应该没问题。

【讨论】：