5

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?

From Chrome

From Firefox

Adam Grant
  • 12,477
  • 10
  • 58
  • 65
  • 1
    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. – Šime Vidas Feb 21 '12 at 16:49
  • 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? – Borealid Feb 21 '12 at 16:49
  • 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. – Adam Grant Feb 21 '12 at 16:50

2 Answers2

5

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

Community
  • 1
  • 1
André
  • 2,184
  • 1
  • 22
  • 30
  • 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. – nelek Jan 16 '16 at 16:49
3

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?

Anish Gupta
  • 2,218
  • 2
  • 23
  • 37
  • 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! – Adam Grant Feb 21 '12 at 17:04