Question

请在这里查看：http://fastforwardacademy.com/，然后在这里查看：http://fastforwardacademy.com/index-page-irs-paid-registered-tax-preparer.htm。

在所有其他浏览器中...... IE，Opera，Safari和Chrome都没有问题，但Firefox无法正确显示菜单。看看CSS有没有人有任何想法？

Answer 1

根本原因是你的HTML非常无效：

http://validator.w3.org/check?uri=http%3A%2F%2Ffastforwardacademy.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

有问题的具体错误是：

第126行，第103栏：文件类型   这里不允许元素“LI”

…decoration:none;"><li class="current1">HOME<br /><span>Fast Forward Academy</s…

上面提到的元素是在a中找到的   不允许的上下文。这个   可能意味着你有错误   嵌套元素 - 例如“样式”   而“身体”部分中的元素   内部“头部” - 或两个元素   重叠（不允许）。

您正在li元素中嵌套a元素（也在ul元素内）。这是无效的，并且导致Firefox，我们应该说，呕吐？

适当选择单词，因为有问题的Firefox bug被称为..

The Vomit Bug

您的源代码如下所示：

<ul>
    <a href="index.php" name="Fast Forward Academy" style="text-decoration:none;">
        <li class="current1">HOME<br /><span>Fast Forward Academy</span></li>
    </a>
    ..
</ul>

但是Firefox（版本3，这在Firefox 4中已得到修复）将其导入此（使用Firebug进行检查）：

<ul>
    <a style="text-decoration: none;" name="Fast Forward Academy" href="index.php"></a>
    <li class="current1">
        <a style="text-decoration: none;" name="Fast Forward Academy" href="index.php">HOME<br><span>Fast Forward Academy</span></a>
    </li>
..
</ul>

因此，修复方法是将a元素放在li元素中，而不是相反。您还必须切换一些CSS。

关于不相关的说明..

你的doctype是这样的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

但下一行源代码是：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

您正在使用<br />。

您可能想要将您的doctype更改为此; XHTML Transitional doctype：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Answer 2

问题是.main_nav ul li a:hover, .main_nav ul li.current的填充。单击单击时会应用填充一次，而悬停时第二次应用填充，这会使链接不对齐。悬停时不需要填充。

在 .main_nav ul li a:hover, .main_nav ul li.current

添加

.main_nav ul li a:hover{
 padding:0;
}

Firefox水平菜单麻烦，所有其他浏览器都很好

2 个答案: