Form padding differences in Firefox and Opera/Chrome/IE

I'm having a problem with the padding in my form on my website. If I've set a height/width to a form element and then adds a padding to it. In all browsers I've tried, except Firefox, the padding is added to the height/width.

If I have a input with 200 in width and 20px in height. and padding at 5 (all ways), the sum and total width and height would be 210px and 30px, but in Firefox it is 200px and 20px.

How do I work my way around this?

Give the input this CSS:

box-sizing: border-box;

You can read more about box-sizing on QuirksMode, the W3C spec, and MDN. Here is its browser support. Use the prefixes -moz- or -webkit- if required by your target browsers.

This answer had previously suggested the value initial, which I had found by using the up/down arrow keys in the Chrome Web Inspector. But it turns out that initial is a CSS keyword, applicable to any property, that represents the initial value of the property – the browser’s default value. initial is less safe than explicitly naming which box model to use. If box-sizing: initial were specified and a browser’s default value for box-sizing changed, the input’s padding could break again.

Try to use a CSS framework such as blueprint-css. Take a look the example pages that ship with blueprint (there's a file called forms.html). This should solve your padding problem as well as a bunch of other problems you may encounter.

Have you tried putting display:block on the form? It sounds like FF might possibly be treating it like it was an inline element.

http://necolas.github.com/normalize.css/

/*
 * 1. Addresses box sizing set to content-box in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 * 3. Removes excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

Luis Roman

Try this:

/* Set all margins and paddings to 0 on all browsers */

* {
    margin: 0;
    padding: 0;
}

来源：https://stackoverflow.com/questions/1354470/form-padding-differences-in-firefox-and-opera-chrome-ie

标签

css

firefox

padding