为什么输入和选择使用不同的盒子模型？

Question

似乎（至少在 IE 8 和 Firefox 3 中）对于 元素，宽度指的是内容，但对于 元素，宽度指的是内容+边框。我在 CSS 样式中明确指定了宽度。

有什么关系？我会认为两者都是内联替换元素并且行为相同。这种行为是否符合 W3C 标准？它在所有主流浏览器中都这样工作吗？

Answer 1

选择尺寸与输入尺寸不同，因为盒子尺寸不同。 Input 将 box-sizing 设置为“content-box”，而 select 将 box-sizing 设置为“border-box”。在下面的示例中，输入将比选择更宽：

<input type="text" name="a" value="a" style="width:100px; border:5px solid red; padding: 10px;" />
<select name="b" style="width:100px; border:5px solid red; padding: 10px;" /><option value="b">b</option></select>

这是因为输入的全宽将是 width+padding(left+right)+border(left+right) 而对于 select 全宽将只是宽度（但你知道的）。要使两个元素的行为方式相同，您必须更改 box-sizing 模型。在下面的示例中，输入和选择将具有完全相同的宽度*：

<input type="text" name="a" value="a" style="width:100px; border:5px solid red; padding: 10px;" />
<select name="b" style="box-sizing: content-box; width:100px; border:5px solid red; padding: 10px;" /><option value="b">b</option></select>

*使用 -moz-box-sizing for firefox

据我所知，这种行为在所有现代浏览器（包括 iE6）中都是一致的，但我不知道为什么它会以这种方式工作。不知道任何 W3 规范在哪里描述了这种特殊行为。有note suggesting default styling，但它只涵盖简单的属性——这就是为什么重置默认 css 如此受欢迎的原因。

Answer 2

我在 CSS 上完美地使用了这个：

input, select
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

这样，您可以强制输入的行为和选择相同。

Answer 3

将所有控件和其他常见元素（如 html、body 等）的基本样式“重置”为共同的最低限度通常是一种最佳做法。虽然不能保证在所有浏览器中产生完美匹配的控件，但它让你更接近。有各种各样的预制重置 CSS，您可以简单地从互联网上使用。最常见的一种是 YUI 的重置 css：

• YUI Reset CSS

重置 CSS 后，若要解决宽度差异，您只需为输入控件设置标准默认边框和内边距，以正确适应您的网站样式。

Answer 4

浏览器出现在 W3C 之前，因此它们定义了自己的呈现规则。浏览器在表单控件样式方面永远不会保持一致（在不久的将来），因为默认浏览器样式不一致并且表单控件由不同的操作系统呈现。

本站列出默认浏览器样式：http://www.iecss.com/（输入的样式不一致）