make button and links height identical

Question

On this page there's a form with a Publish and Cancel button. The former is an <input type="submit"> and the latter is an <a>. For some reason the Publish button is slightly taller than the Cancel button, though I don't understand why because they both have the same:

• font-size
• top and bottom border sizes
• top and bottom padding sizes

I had a look in Firebug and the reason for the difference seems to be because the <input> is given a height of 19px whereas the <a> has a height of 17px. How can I make the height of both identical?

Update

I'm not bothered about supporting IE <= 7

Answer 1

You should apply display: inline-block to the a, to match the button which already has display: inline-block.

You also need this to remove the extra spacing in Firefox:

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}