Improve consistency of button element across browsers

The button element can be styled easily for the desired look, however as soon as padding is specified the button appearance is drastically different across web browsers. So I did some searching and found several different fixes and found that a combination of all of them does the trick (mostly).

I have added the following to the end of Eric Meyers fantastic reset stylesheet.

/* Fix for IE7 */
button {
    overflow: visible;
    width: 0px;
    /* Default padding that can be overridden as desired. */
    padding: 2pt 4pt;
}
/* Fix for IE7+ */
button {
    width: auto;
}
/* Fix for FF */
button::-moz-focus-inner {
    padding: 0px;
    border: none;
}

I threw a crude test together and viewed it with Chrome, FireFox, IE9/IE8/IE7 and Opera and it seems to be a solved case. There are minor differences but it is certainly an improvement. IE7 still adds padding above and beneath button text. Please post a comment if you know how to fix that problem!

References:

• http://www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ 
• http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox/