css - How to style button inputs to be identical in Chrome and Firefox?

Question

Take a look at this JSFiddle example in Chrome and FireFox.

In Chrome, the button should be a tad smaller than in FireFox. I have added the solution CSS from How to reset default button style in Firefox 4 + (which made the button a little smaller) but the button is still bigger in FireFox. The difference isn't very visible in this example, but have a look at how it affects my design.

Chrome:

FireFox:

As you can see the button is thicker in FireFox and is affecting the layout. Is there any way of avoiding this short of using styled divs in place of buttons?

---

Also, I'm using Meyer's CSS reset stylesheet

Answer 1

Firefox adds a special padding to inputs and button elements. This takes care of it:

button::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}