试图让填充和行高正常显示在FF

Question

我有一个菜单，它使用jQuery切换子菜单。在铬，EI和Safari中看起来很好。 Firefox只是没有渲染填充权。该网站是www.caitmizzi.com/home

我有一个在这里的jsfiddle http://jsfiddle.net/6GwjA/ - 你必须去检查左侧的框中查询UI 16年8月1日，它的工作

任何帮助非常感谢

感谢 格雷格

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