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?

Dorseydorsiferous

Can't you make a shorter, more concise demo? When asking questions on SO, it is considered polite to provide special demos (made from scratch), instead of just copy-pasting a large piece of code from your web-page. – Stockbreeder

You didn't specify a width other than auto nor a max-width, so the browser is allowed to make the element as wide as it likes to suit its developers' senses of style. Why not cap the width at 4px if that's what you want? – Cower

If I did this, once the user rolls over the button, the button will only be 4 pixels wide (plus padding) try out the jsfiddle, you'll see it expands on hover. – Dorseydorsiferous

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?

Impulsion

Great minds think alike :) I just made this change and was about to post that it worked here when I saw your answer. Thank you! – Dorseydorsiferous

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

Deon

I know it's old answer, but FF 41 and Chrome 47 not set same button height even with Your example. There is 2px differences... I have to add margin-top:-1px; margin-bottom:-1px; to fix this problem. – Hereupon