Button height inconsistency (cross-browser)

Question

I'm having a problem whilst setting the height of a button. Basically I can't manage to have it cross-browser. With Firefox, it is higher than normal, without any reason.

Here it's a screenshot (Firefox, Safari and Opera, in this order):

And here the code: http://jsfiddle.net/TMUnS/2/

I also tried adding some specific declarations I found on the web, but actually they just reduced the height a bit, but still, they aren't the same (in the same order):

And here the code: http://jsfiddle.net/TMUnS/4/.

How could I fix this?

Answer 1

Firefox has this funny thing called -moz-focus-inner. I'm not totally sure what it's for, I just know that you sometimes need to do this to get buttons to behave:

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
    padding:0;
    border:0;
}

That might be what you need. You can see the difference here (in Firefox): http://jsfiddle.net/TMUnS/9/