填写Firefox和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.

我的网站上的填写表格有问题。如果我已将高度/宽度设置为表单元素，然后向其添加填充。在我尝试过的所有浏览器中，除了Firefox之外，填充都添加到高度/宽度。

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.

如果我的输入宽度为200，高度为20px。并且在5（所有方向）填充，总和和总宽度和高度将是210px和30px，但在Firefox中它是200px和20px。

How do I work my way around this?

我如何解决这个问题？

5 个解决方案

#1

Give the input this CSS:

给这个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.

您可以在QuirksMode，W3C规范和MDN上阅读有关box-sizing的更多信息。这是它的浏览器支持。如果目标浏览器需要，请使用前缀-moz-或-webkit-。

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.

这个答案以前曾建议使用Chrome Web Inspector中的向上/向下箭头键找到的值initial。但事实证明，initial是一个CSS关键字，适用于任何属性，表示属性的初始值 - 浏览器的默认值。 initial比明确命名要使用的框模型更安全。如果指定了box-sizing：initial并且更改了box-sizing的浏览器默认值，则输入的填充可能会再次中断。

#2

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.

尝试使用CSS框架，例如blueprint-css。看一下蓝图附带的示例页面（有一个名为forms.html的文件）。这应该可以解决您的填充问题以及您可能遇到的一些其他问题。

#3

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

你试过在表格上放置display：block吗？听起来像FF可能会像对待内联元素一样对待它。

#4

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;
}

#5

-2

Try this:

尝试这个：

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

* {
    margin: 0;
    padding: 0;
}

#1