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

Question

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

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

非常感谢任何帮助

谢谢格雷格

Answer 1

我不确定你为什么有以下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;
}