在Firefox4上垂直显示html水平菜单

Question

我刚刚在Firefox4 (beta 10)中测试了一个网站，水平菜单是垂直显示的。

在chrome中，菜单水平显示如下：

​

但在Firefox4中，它是这样显示的：

​

​

我正在使用superfish horizontal menu。网站上的示例在Firefox4中看起来还不错。

我如何开始调查这是Firefox4中的一个bug，还是我的水平菜单代码有问题？

Answer 1

我不认为你的问题与超级鱼类或潜在的吸盘鱼有关。快速查看一下就会发现，<div id="title">是浮动在左边的，但是浮点数并没有在这个位置和<table id="menuHeader">之间被清除。在火狐中，#menuHeader表格和<ul>被放置在#title的右边，所以表格没有足够的宽度让浮动块水平布局。

作为一个快速技巧，您可以在#menuHeader之前填充一个<br/>

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

你应该会看到Firefox的问题消失了。但是，您应该在#title之后和#menuHeader之前显式地清除您的浮点数。在#header和#flashwrapper之间进行清理似乎是合适的：

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

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

至于如何调试这类东西，WebKit浏览器(如Chrome和Safari)中的DOM检查器非常棒。Firebug的DOM检查器也很不错。在这种情况下，您需要同时使用它们。DOM检查器、猜测工作、经验和大量的咒骂是我弄清楚这类事情的工具。