Firefox中文本上方出现链接下划线？

Question

在我的网站http://forums.jordantrudgett.com/ 我的下拉菜单中的链接出现故障。我正在使用来自Dynamic Drive jQuerySlideMenu 的代码。

在 Firefox 19 中，下划线显示在文本上方。

这就是它在 Chrome 27 中的显示方式：

在 Internet Explorer 10 中：

我检查了 Firebug 中的元素，但我不确定究竟是什么导致了这个问题。我可以看到没有使用下划线的 CSS。

经过一番快速搜索，我发现 this issue 于 2012 年在 bugzilla 中报告，这是我在文本上方出现的下划线中发现的唯一内容。它指向vertical-align 可能是造成这种情况的原因。我在滑块 CSS 中更改了 vertical-align，但没有任何区别（top、middle 或 bottom。）我想修复它。有什么明显的我遗漏的东西，或者发生这种情况的充分理由吗？

Answer 1

从.jqueryslidemenu .app 中的jqueryslidemenu.css 的第54 行删除vertical-align: middle;，它将解决问题。

以后使用firebug，在这种情况下会很方便

Answer 2

您正确地将vertical-align 确定为罪魁祸首。

jqueryslidemenu.css 中的这一行正在为悬停的项目设置样式：

.jqueryslidemenu .app {
    height: 18px;
    vertical-align: middle;
}

当我在 Firebug 中删除 vertical-align 时，问题就消失了。因此，从该行中删除 vertical-align。

如果由于某种原因您无法编辑 jqueryslidemenu.css，只需将以下内容添加到您自己的 css 文件中：

.jqueryslidemenu .app {
    vertical-align: inherit;
}