Button height mismatch (cross browser)

I have a problem adjusting the height of the button. By and large, I do not get a cross browser. With Firefox, it is taller than usual for no reason.

Here is a screenshot (Firefox, Safari and Opera, in that order):

Initial

And here is the code: http://jsfiddle.net/TMUnS/2/

I also tried to add some specific ads that I found on the Internet, but in fact they slightly reduced the height, but still they do not match (in the same order):

Second try

And here is the code: http://jsfiddle.net/TMUnS/4/ .

How can i fix this?

+6
source share
3 answers

Firefox has this fun thing called -moz-focus-inner . I'm not quite sure what this is for, I just know that you sometimes need to do this to make the buttons behave:

 button::-moz-focus-inner, [type="button"]::-moz-focus-inner { padding:0; border:0; } 

This may be what you need. You can see the difference here (in Firefox): http://jsfiddle.net/TMUnS/9/

+10
source

This is a feature set in Firefox that limits the linear height of buttons. It sets the default line height for buttons - http://www.cssnewbie.com/input-button-line-height-bug/ . I would try using fixed height for buttons and play with padding.

+2
source

Do you use CSS Reset? CSS Reset normalizes CSS for browsers.

Try this YUI reset: YUI CSS RESET

0
source

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


All Articles