Line-height issue with firefox

Question

I have a problem trying to make a search button looking fine on firefox. It's an input submit made with an iconic font, a white background and a border-radius like this:

display: block;
width: 60px;
height: 60px;
line-height: 60px !important;
padding: 0;
background: white;
border: 0;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-khtml-border-radius: 30px;
font-family: 'iconic';
color: #bad104;
font-size: 5em;

It must look like this (chrome and IE renders perfectly my code) : http://img341.imageshack.us/img341/6590/kogy.png

But when i use the same code on firefox, here is what I get: http://img17.imageshack.us/img17/953/jms4.jpg

I looked on dom inspector on both browsers, and when i look at "calculated values", it doesn't renders the same thing on chrome (line-height: 60px) and firefox (line-height: 67px).

Everything I've tried from now is a fail :/ I hope you guys will have some help for me :)

Thanks !

Answer 1

You shouldn't define a unit of measurement with line-height, this is so that the spacing is relative to the font size. In your example

line-height: 60px;

should be

line-height: 1;

or

line height: 100%;

as you are specifying that you want it to be the same height as the font.

Answer 2

Button line-height in FF is hardcoded as line-height: normal !important; meaning that even a user defined line-height: xxx !important will not override it.

Give these a read:

https://bugzilla.mozilla.org/show_bug.cgi?id=349259

https://bugzilla.mozilla.org/show_bug.cgi?id=697451