CSS: Size of buttons in Chrome is different than Firefox

Question

I have the following HTML code:

...
 
... 


        

Answer 1

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 2

/* 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 3

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 4

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 5

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.

Answer 6

Try to use -webkit-box-sizing:content-box, then read about box-models.