Question

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

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

我如何解决这个问题？

Answer 1

提供input此CSS：

box-sizing: border-box;

您可以在QuirksMode，the W3C spec和MDN上详细了解box-sizing。这是its browser support。如果您的目标浏览器需要，请使用前缀-moz-或-webkit-。

此答案之前已使用Chrome网页检查器中的上/下箭头键找到了值initial。但事实证明initial是一个CSS关键字，适用于任何属性，表示属性的初始值 - 浏览器的默认值。 initial比明确命名要使用的框模型安全性更低。如果指定了box-sizing: initial且浏览器的box-sizing默认值发生了更改，则input的填充可能会再次中断。

Answer 2

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

Answer 3

您是否尝试过将display：block放在表单上？听起来像FF可能会像对待内联元素一样对待它。

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

Answer 5

试试这个：

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

* {
    margin: 0;
    padding: 0;
}

填写Firefox和Opera / Chrome / IE中的填充差异

5 个答案: