CSS Firefox 和 Opera/Chrome/IE 中的表单填充差异
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1354470/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Form padding differences in Firefox and Opera/Chrome/IE
提问by guzh
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 像素且高度为 20 像素的输入。和填充为 5（所有方式），总和和总宽度和高度将为 210 像素和 30 像素，但在 Firefox 中为 200 像素和 20 像素。
How do I work my way around this?
我该如何解决这个问题？
回答by Rory O'Kane
Give the inputthis CSS:
给input这个CSS：
box-sizing: border-box;
You can read more about box-sizingon QuirksMode, the W3C spec, and MDN. Here is its browser support. Use the prefixes -moz-or -webkit-if required by your target browsers.
你可以阅读更多有关box-sizing在怪异模式，W3C规范，并MDN。这是它的浏览器支持。使用前缀-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 initialis a CSS keyword, applicable to any property, that represents the initial value of the property – the browser's default value. initialis less safe than explicitly naming which box model to use. If box-sizing: initialwere specified and a browser's default value for box-sizingchanged, the input's padding could break again.
这个答案之前已经建议了 value initial，这是我通过使用 Chrome Web Inspector 中的向上/向下箭头键找到的。但事实证明这initial是一个 CSS 关键字，适用于任何属性，表示属性的初始值——浏览器的默认值。initial不如明确命名要使用的框模型安全。如果box-sizing: initial指定了 并且box-sizing更改了浏览器的默认值，则input的填充可能会再次中断。
回答by Christoph Schiessl
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）。这应该可以解决您的填充问题以及您可能遇到的一系列其他问题。
回答by edeverett
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 可能会将其视为内联元素。
回答by vulgarbulgar
http://necolas.github.com/normalize.css/
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;
}
回答by Luis Roman
Try this:
尝试这个：
/* Set all margins and paddings to 0 on all browsers */
* {
margin: 0;
padding: 0;
}
