input behaviour in browsers

how to make inputs look like the same in every browser?

how can you make buttons or inputs look like the same in every browser? in firefox the开发者_运维问答 padding is behaving different than ie and chrome

input.btn {
    border:1px solid #23458c;
    background:url('gfx/layout.btn_bg.png');
    color:#f0f5fa;
    font-weight:bold;
    margin-right:6px;
    padding:1px 5px 2px 5px;
    [if Gecko] padding:0px 5px 1px 5px;
    cursor:pointer;
}

edit

input.btn {
    border:1px solid #23458c;
    background:url('gfx/layout.btn_bg.png');
    color:#f0f5fa;
    font-weight:bold;
    margin-right:6px;
    padding:1px 6px 2px 6px;
    cursor:pointer;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

---

Firefox adds some inner padding for it's dotted focus effect which you may need to remove.

input.btn::-moz-focus-inner {
  border: 0;
  padding: 0;
}

---

It's possible that this is due to the varying ways in which form elements are handled by the different browsers. You could try adding:

-moz-box-sizing: content-box; /* or border-box */
-webkit-box-sizing: content-box;
box-sizing: content-box;

to your CSS styles for the buttons, this should force all browsers to use the same box model, after which the padding rules should apply the same cross-browser.