jquery - 试图获取填充和行高以在FF中正确显示

我有一个菜单，使用jquery来切换子菜单。在chrome，EI和Safari中看起来不错。 Firefox只是没有正确显示填充。该网站是www.caitmizzi.com/home

我在这里有一个jsfiddle http://jsfiddle.net/6GwjA/-您必须选中左侧的Query UI 1.8.16框才能工作

任何帮助表示赞赏

谢谢
格雷格

最佳答案

我不确定为什么会有以下CSS：

.subMenu{
    font-size: 115px;
    line-height: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
}

这将产生较小的线高，从而缩小元素的大小，但增加填充，从而再次扩大元素的大小。我猜想不同的浏览器对这种边缘情况的解释会有所不同。

如果删除这些属性（并使其继承与其他列表元素相同的设置），则可以覆盖内部列表的样式并获得更一致的效果。

我更新了您的jsfiddle：http://jsfiddle.net/6GwjA/8/

关键更改是.subMenu和.subMenuStyle类的附加项。

.subMenu{
    font-family: Impact, Charcoal, sans-serif;
    list-style-type: none;
}
.subMenuStyle {
    font-size: 15px;
    line-height: 30px;
}

关于jquery - 试图获取填充和行高以在FF中正确显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10089293/