CODEWITHSUNDEEP
firefoxgoogle-chromecssprogressive-enhancement
Adam Grant
Adam Grant

Reputation: 13105

Difference in button width between Firefox and Chrome

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

Upvotes: 5

Views: 3572

Answers (2)

André
André

Reputation: 2204

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

Upvotes: 5

Anish Gupta
Anish Gupta

Reputation: 2226

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?

Upvotes: 3

Related Questions