versuchen, Padding und Zeilenhöhe zu erhalten, um richtig in FF anzuzeigen

Question

Ich habe ein Menü, das jquery verwendet, um ein Untermenü umzuschalten. Sieht gut aus in Chrom, EI und Safari. Firefox rendert das Padding nicht richtig. Die Seite ist www.caitmizzi.com/home

ich habe eine jsfiddle hier http://jsfiddle.net/6GwjA/ - Sie haben das Feld Abfrage UI 1.8.16 auf der linken Seite zu überprüfen, denn es

jede Hilfe sehr

geschätzt zu arbeiten

Dank Greg

Answer 1

ich bin nicht sicher, warum Sie die folgende CSS haben:

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

Dies schafft ein Kleine Linienhöhe verkleinert die Größe des Elements, fügt jedoch Padding hinzu und erweitert die Größe des Elements erneut. Ich vermute, dass verschiedene Browser diesen Randfall anders interpretieren.

Wenn Sie diese Eigenschaften entfernen (und dieselben Einstellungen wie die anderen Listenelemente erben), können Sie den Stil der inneren Liste überschreiben und einen konsistenteren Effekt erzielen.

ich Ihre jsfiddle aktualisiert: http://jsfiddle.net/6GwjA/8/

Die wichtigsten Änderungen sind auf die .subMenu und Ergänzungen der .subMenuStyle Klassen.

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