为什么输入和选择使用不同的盒子模型？
它看起来（至少在IE 8和Firefox 3中）对于<input>元素，宽度指的是内容，但对于<select>元素，宽度指向内容+边界。 我明确指定了CSS样式的宽度。
这是怎么回事？ 我原以为这两个都是内联替换的元素，并会表现相同。 这种行为是否符合W3C标准？ 它在所有主流浏览器都以这种方式工作吗？
选择尺寸因输入尺寸不同而不同，因为尺寸不同。 输入框的大小设置为“content-box”，而select的框大小设置为“border-box”。 在下面的例子中，输入将比select更宽：
<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>
这是因为输入的全宽度将是宽度+填充（左+右）+边框（左+右），而选择全宽将只是宽度（但您知道）。 为了使两个元素的行为相同，您必须更改方框大小模型。 在下面的例子中，输入和select将具有完全相同的宽度*：
<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>
*为Firefox使用-moz-box-sizing
据我所知，这种行为在所有现代浏览器（包括iE6）中都是一致的，但我不知道它为什么以这种方式工作。 不知道任何W3规范描述的这种特定行为。 有注释暗示默认样式，但它只涵盖简单的属性 - 这就是为什么重置默认的CSS是如此受欢迎。
我在CSS上完美地使用了这个工作：
input, select
{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
有了这个，你可以强制输入的行为和选择是一样的。
将所有控件和其他常用元素（如html，body等）的基本样式“重置”到最小公共地点通常是最佳做法。 虽然不能保证在所有浏览器中都能生成完美匹配的控件，但它可以让你更接近。 有各种各样的预制复位CSS，您可以简单地使用互联网。 其中最常见的是YUI的重置css：
一旦重置了CSS，为了解决宽度差异问题，您只需简单地为输入控件设置标准的默认边框和填充以适应您的网站样式。
链接地址: http://www.djcxy.com/p/46897.html