17

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

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

我该如何解决这个问题？

4

5 回答 5

28

给input这个CSS：

box-sizing: border-box;

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

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

于 2011-07-29T16:25:19.023 回答
3

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

于 2009-08-30T18:42:50.473 回答
0

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

于 2009-08-30T18:37:21.560 回答
0

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;
}
于 2012-10-16T05:43:43.093 回答
-2

试试这个：

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

* {
    margin: 0;
    padding: 0;
}
于 2011-02-03T15:43:04.623 回答