CSS: Size of buttons in Chrome is different than Firefox

Question

I have the following HTML code:

<style type="text/css">
.submitbutton{margin-left:-2px;padding:1px}
</style>
...
<form> 
... 
<input class=submitbutton type=submit value="Create Listings" /> 
</form>

In Firefox, the input button has more padding than in Chrome.

Any ideas why?

UPDATE: If you're wondering why I have the negative margin - it's because between the input field and the input button - there is too much space.

Answer 1

/* Remove button padding in FF */
button::-moz-focus-inner {
    border:0;
    padding:0;
}

You'll get the same button appearance in Chrome and Firefox.

Answer 2

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 3

form elements render differently(as defaults) depending on the OS and/or browser. if you want your form elements(input fields, submit buttons, etc.) to look the same in all instances, you have to explicitly style them using borders, paddings and margins.

Answer 4

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.

Answer 5

Try this

/* Browser Firefox to match the Chrome */
#buttonid::-moz-focus-inner, .buttonclass::-moz-focus-inner, button::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important;
}

Answer 6

尝试使用-webkit-box-sizing:content-box ，然后阅读有关盒子模型的内容。

Answer 7

To get the same size on both browser you have to set the same initial values to all the CSS elements, like a reset.

This is how I fixed the problem: put this at the beginning of your css file

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, a
    {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      border-top-width: 0px;
      border-right-width-value: 0px;
      border-bottom-width: 0px;
      border-left-width-value: 0px;
    }

Now you have to fix some aspect changes on your page but it will look almost the same on all the browsers.

Answer 8

I've tried now to modify height and padding in the same time.

The result it's quite good. Seems to be correct for both browsers (FF and Chrome in Linux)... for example i've put:

.classname {
height:20px;
    padding:4px;
}

Maybe it's just my lucky day... however you can try it.