html水平菜单在firefox 4上垂直显示

Question

我刚刚在firefox 4（测试版10）测试网站，水平菜单垂直显示。

在chrome中，菜单是水平的，如下所示：

但在firefox 4中它显示如下：

我正在使用superfish horizontal menu。网站上的例子在firefox 4中看起来很好。

我将如何开始调查这是否是firefox 4中的错误或我的水平菜单代码有问题？

Answer 1

我认为您的问题不在于超级鱼或潜在的黑鱼。快速查看表明<div id="title">浮动到左侧，但浮点数不会在<table id="menuHeader">之间清除。 #menuHeader表格因此<ul>位于Firefox #title旁边，因此表格的宽度不足以使浮点数水平布局。

作为快速黑客，你可以在<br/>之前填写#menuHeader：

<br /><table id="menuHeader">

你应该看到Firefox问题消失了。但是，您应该在#title之后和#menuHeader之前明确地清除您的花车。在#header和#flashwrapper之间清算似乎是合适的：

<div id="header">
    <!--...-->
</div>
<div style="clear: both;"></div>
<div id="flashwrapper">
    <!--...-->
</div>

您也可以使用overflow:hidden明确修复，但我倾向于明确清除，即使它确实污染了我的HTML样式信息。

就如何调试此类事情而言，WebKit浏览器（例如Chrome和Safari）中的DOM检查器非常棒。 Firebug的DOM检查员也很不错。在这种情况下，您将同时使用它们。 DOM检查员，猜测工作，经验和大量的咒骂是我弄清楚这样的事情的工具。