Button height rendering inconsistency in Firefox - why are input elements taller?
- by George Edison
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/
