为什么选择元素不像其他表单元素那么宽？

Question

如果我将select和text输入设置为相同的宽度，则select元素的宽度始终比文本输入的宽度小几个像素。无论我是以像素还是百分比设置宽度，这似乎都会发生。有谁知道为什么？有什么方法可以阻止这种情况吗？

最小的演示：http://codepen.io/nosecreek/pen/wehKu

在Chrome和IE7中测试

Answer 1

我认为它与渲染的盒子大小有关。选择的可视部分小于定义宽度的框。将其包含在您的CSS中，它将显得正常。

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

http://codepen.io/joe/pen/taJnz

参考：Select inputs and text inputs in HTML - Best way to make equal width?

编辑：我弄清楚为什么会这样。我认为这是因为当你指定宽度时，你会告诉它内部盒子，ACTUAL输入区域有多大。文本框还带有边框作为标准，边框各为2像素，这是文本区域宽度的附加大小。添加上面的CSS会更改宽度的计算方式。当我创建文本框1px的边框时，它只比选择大2 px。这似乎可以解释它。