Firefox 和 Opera/Chrome/IE 中的表单填充差异答案

【问题标题】：Form padding differences in Firefox and Opera/Chrome/IEFirefox 和 Opera/Chrome/IE 中的表单填充差异
【发布时间】：2010-11-24 04:16:45
【问题描述】：

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

如果我有一个宽度为 200、高度为 20px 的输入。并且填充为 5（所有方式），总宽度和高度的总和将为 210 像素和 30 像素，但在 Firefox 中为 200 像素和 20 像素。

我该如何解决这个问题？

【问题讨论】：

链接到页面？你设置了 DOCTYPE 吗？
还没上线。 ;\ 我之前读过有人对此有疑问，但我没有找到任何答案。我已将 doctype 设置为 xhtml trans。
该文档在xhtml strict中也有效

标签： css firefox padding

【解决方案1】：

您是否尝试过将 display:block 放在表单上？听起来 FF 可能会将其视为内联元素。

【讨论】：

display: inline-block 可能会更好

【解决方案2】：

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

【讨论】：

我看到了 css-file 的蓝图表单，看起来 input[type=text] 至少在输入字段上做到了..！现在我只需要在textarea上解决它，我会研究它！谢谢（：

【解决方案3】：

试试这个：

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

* {
    margin: 0;
    padding: 0;
}

【讨论】：

这是不正确的，浏览器的默认样式应该与问题所问的现象无关

【解决方案4】：

给input这个CSS：

box-sizing: border-box;

您可以在QuirksMode、the W3C spec 和MDN 上阅读有关box-sizing 的更多信息。这是its browser support。如果目标浏览器需要，请使用前缀 -moz- 或 -webkit-。

此答案之前曾建议使用值 initial，这是我通过使用 Chrome Web Inspector 中的向上/向下箭头键找到的。但事实证明，initial 是一个 CSS 关键字，适用于任何属性，表示该属性的初始值——浏览器的默认值。 initial 不如明确命名要使用的盒子模型安全。如果指定了box-sizing: initial 并且浏览器的box-sizing 的默认值发生了变化，input 的填充可能会再次中断。

【讨论】：

谢谢！这正是我想要的，box-sizing: border-box; 成功了 :) 抱歉回复晚了！
或。当我再次看到我的问题时，看起来我已经习惯了填充问题。我猜box-sizing: content-box; 是获得 210 像素/30 像素的总宽度/高度的正确选择。我认为传统的盒子模型更符合逻辑（参见Quirksmode）..
仅供参考，在 CSS 文件中添加 * { box-sizing: border-box; } 会将所有元素设置为边框框，即使添加边距和内边距也会保持元素的宽度和高度。默认的框模式content-box 在元素的宽度上添加了填充和边距，在许多人看来这是不合逻辑且难以使用的。在此处阅读更多信息paulirish.com/2012/box-sizing-border-box-ftw。编辑：忘了补充，border-box 在 IE8 及更高版本中受支持，因此使用起来很安全。

【解决方案5】：

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

【讨论】：