当前位置：文江博客话题详情

Firefox 水平菜单出现问题，其他浏览器都正常

发布于 2024-10-30 20:00:10 字数 379 浏览 5 评论 0原文

请查看此处：http://fastforwardacademy.com/，然后查看此处：http://fastforwardacademy.com/index-page-irs-paid-registered-tax-准备者.htm。

在所有其他浏览器中... IE、Opera、Safari 和 Chrome 都没有问题，但 Firefox 无法正确显示菜单。看看CSS，有人知道为什么吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

各自安好 2024-11-06 20:00:10

根本原因是您的 HTML 严重无效：

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

有问题的具体错误是这样的：

第 126 行，第 103 列：文档类型
此处不允许使用元素“LI”
…装饰：无;">
HOME 快速前进学院上面指定的元素是在不允许的上下文。这可能意味着你错误地嵌套元素——例如“样式” 改为“body”部分中的元素内部“头部”——或两个元素重叠（这是不允许的）。

您将 li 元素嵌套在 a 元素内（也在 ul 元素内）。这是无效的，并且会导致 Firefox 呕吐吗？

一个适当的单词选择，因为有问题的 Firefox 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 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">

并且您正在使用。

您可能希望将您的文档类型更改为此； XHTML 过渡文档类型：

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

The root cause is that your HTML is woefully invalid:

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

The specific error in question is this:

Line 126, Column 103: document type
does not allow element "LI" here
…decoration:none;"><li class="current1">HOME<br /><span>Fast Forward Academy</s…
The element named above was found in a
context where it is not allowed. This
could mean that you have incorrectly
nested elements -- such as a "style"
element in the "body" section instead
of inside "head" -- or two elements
that overlap (which is not allowed).

You're nesting an li element inside an a element (also inside a ul element). This is invalid, and is causing Firefox to, shall we say, puke?

An appropriate choice of word, because the Firefox bug in question is called..

The Vomit Bug

Your source code looks like this:

<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>

But Firefox (version 3, this is fixed in Firefox 4) munges it into this (checked with 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>

So, the fix is to place your a elements inside your li elements, instead of the other way around. You will also have to switch around some CSS.

On an unrelated note..

Your doctype is this:

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

But the next line of source code is this:

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

and you're using <br />.

You might want to change your doctype to this; the XHTML Transitional doctype:

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

回复收藏 0 原文

似梦非梦 2024-11-06 20:00:10

问题是 .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;
}

The problem is padding for .main_nav ul li a:hover, .main_nav ul li.current. Padding is applied once when you click on the click and a second time on hover and that is making the link go out of alignment. You don't need padding on hover.

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

Add