CSS: Size of buttons in Chrome is different than Firefox

Question

I have the following HTML code:

...
 
... 


        

Answer 1

Even though you as a developer test in different browsers and see the difference in buttons, the user will not. It's too easy to get focused on things that users won't notice: the user likely has either Firefox or else IE or else Chrome, but not all of them. Rarely do users ever switch browsers over time let alone switch between them and complain about a few pixels diff.

So if you consider the buttons and the experience in just one browser at a time, and if it works well in that experience/browser, then don't bother spending more time. Instead move onto next steps.

This doesn't answer 'why' but somebody else explained that one.

Answer 2

The thing that no one is mentioning here is that Chrome resets the CSS for these elements:

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button

So no matter what you set the padding to, as far as I can tell, it will be overridden by Chrome. I have tried using !important as well as other techniques and still no luck. If anyone has any insight into this I would love to know.