Search code examples
firefoxgoogle-chromecssprogressive-enhancement

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

Solution

  • 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?