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

Question

我刚刚在 Firefox 4（beta 10）中测试了一个网站，水平菜单垂直显示。

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

但在 Firefox 4 中显示如下：

我正在使用superfish 水平菜单。网站上的示例在 Firefox 4 中似乎很好。

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

Answer 1

我认为您的问题不在于超级鱼或潜在的吸盘鱼。快速查看表明它<div id="title">向左浮动，但浮动并没有在 和 之间清除<table id="menuHeader">。#menuHeader表格和因此位于 Firefox 中的<ul>右侧#title，因此表格没有足够的宽度让浮动水平布局。

作为一个快速破解，你可以<br/>在之前填充#menuHeader：

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

你应该会看到 Firefox 的问题消失了。#title但是，您应该在 after和 before某个合理的地方明确清除浮动#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 检查员、猜测工作、经验和大量咒骂是我找出此类问题的工具。