Difference in button width between Firefox and Chrome

Question

I know there are lots of FF/Chrome CSS questions, but I can't seem to find this exact one.

Here is a JS Fiddle showing the problem: http://jsfiddle.net/ajkochanowicz/G5rdD/1/

(Apologies for the long CSS, this was copied from the site.)

Essentially, Firefox and Chrome are giving me two different values for the inner most width of the button, 4 and 6. I'd like it to be 4 or less for both. What is causing this?

Answer 1

You didn't specify a width other than auto.

Different rendering engines think differently how websites should be rendered.

How about changing the width to 4px and :hover to whatever you want?

Answer 2

Try adding the css below. Firefox add an extra padding at the button.

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

Related: Remove extra button spacing/padding in Firefox

Source: http://wtfhtmlcss.com/#buttons-firefox-outline