All geek questions in one place

The difference in the width of the buttons between Firefox and Chrome

I know there are a lot of FF / Chrome CSS issues, but I cannot find this exact one.

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

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

Essentially, Firefox and Chrome give me two different values ​​for the largest button width: 4 and 6. I would like it to be 4 or less for both. What causes this?

From chrome

From firefox

+4
source share
2 answers

You did not specify width except auto .

Different rendering engines have different perceptions of how websites should be displayed.

How to change width to 4px and :hover for everything you want?

+2
source

Try adding css below. Firefox adds an extra addition to the button.

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

Related: Remove extra spaces / additions in Firefox .

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

+4
source

Source: https://habr.com/ru/post/1397643/

More articles:


All Articles