Consider the following two elements:

<button type="submit" class="button">Test</button>
<a href="#" class="button">Test 2</a>

...which use the following style definition:

.button {
    background-color: yellow;
    color: white;
    border: 1px solid orange;
    display: inline-block;
    font-size: 24pt;
    padding: 2px 16px;
    text-decoration: none;
}

This produces two buttons beside each other with an equal height in Chrome. However, Firefox renders the button on the left with a height 1px greater than the button on the right (the <a>):

^{(I've enlarged the image above by 2x.)}

What do I need to do to get the two buttons to have the same height? It seems like the font-size is causing the problem - but I need that attribute.

Fiddle: http://jsfiddle.net/FfRPY/