Question

这是我已经工作了很长一段时间的页面，我无法弄清楚为什么索引页面在Firefox中看起来如此糟糕。所有其他页面似乎都很好。我刚刚完成了模拟页面并编写了整个javascript文件，但我对HTML非常不满意。请注意我从模板开始（从那时起进行了大量更改）。任何人都可以指导我正确的方向吗？

页面：www.fsaesim.com/index.html。

我错过了样式中的某些内容吗？

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

Answer 1

问题是你用浮动样式设置你的ul＃菜单：对。因此，在Firefox中，兄弟div具有相同的行为。指定明确的float:left以避免这种情况。

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

Answer 2

拿着持有“mainpic.jpg”的div并将其移到“nav”区块下方。你可能需要在我之前提到的div上添加一个clear：两种css样式。

Answer 3

实际上这是一个非常简单的修复。在ul nav和image div之间添加<div style="clear:both"></div>会清除您在导航菜单中设置的右浮动，然后将图像与中心对齐。在萤火虫中测试它并且工作正常。

Answer 4

尝试将图像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>

无法弄清楚为什么这个页面在Firefox中看起来很糟糕？在Chrome / IE中看起来不错

4 个答案: