Jquery Can'；我不明白为什么Firefox中的页面看起来很糟糕？Chrome/IE看起来不错

这是一个我已经工作了相当长时间的页面，我不明白为什么索引页面在Firefox中看起来如此糟糕。所有其他页面似乎都很好。我刚刚完成了模拟页面并编写了整个javascript文件，但我对HTML太差了。请注意，我是从一个模板开始的（从那以后有很多变化）。谁能给我指一下正确的方向吗

页面：

我是不是在款式上遗漏了什么

---

编辑：注意前面的图片看起来有多糟糕，顶部菜单栏的图标没有出现，只是看起来不平衡。在IE/Chrome中打开，然后在Firefox中打开以查看失败。

将保存“mainpic.jpg”的div移到“nav”块下方。您可能需要在我前面提到的div上添加一个clear:tware css样式。

问题是您已经用float:right设置了ul#菜单的样式。因此，在Firefox中，兄弟div具有相同的行为。指定一个显式的

float:left

以避免这种情况

   <nav>
      <ul id="menu">
    ...
      </ul>
      <div align="center" style="overflow: hidden; width: 940px; height: 450px; float: left;">
            ...
      </div>
  </nav>

...

...

实际上，这是一个非常简单的修复方法。在ul导航和图像div之间添加

，清除导航菜单中设置的右浮动，然后将图像与中心对齐。在firebug中进行了测试，效果良好。

尝试将图像div移动到导航容器的外部，如下所示：

<header>
    <div class="wrapper">
        <h1><a href="index.html" id="logo">Progress Business Company</a></h1>
    <nav>
            <ul id="menu">
                <li id="nav1" class="active"><a href="index.html">Home<span>Page</span></a></li>
        <li id="nav2"><a href="news.html">News<span>Updates</span></a></li>
            <li id="nav3"><a href="documentation.html">Available<span>Features</span></a></li>
        <li id="nav4"><a href="simulation.html">Run<span>Simulation</span></a></li>
        <li id="nav5"><a href="contact.html">Contact<span>Support</span></a></li>
            </ul>
    </nav>
    </div>
    <div style="overflow: hidden; width: 940px; height: 450px;" align="center">
        <div style="margin-top: 50px; background-color: White; height: 500px;" align="center">
            <img src="images/mainpic3.jpg" alt="" />
        </div>
    </div>
</header>

BTW，对于这样的布局，您应该尝试一下CSS网格框架！它将从一开始就解决几个问题。试试Blueprint（）或960网格系统（），我相信你不会后悔这个决定的@balex+1用于CSS框架。这些框架将跨浏览器出现问题的风险降低了近100%。它们使用起来非常简单。这就解决了它！我一辈子都搞不清楚。我猜它和导航标签有相同的属性？谢谢你，伙计！！