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

Question

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

最小演示: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?

编辑:我明白为什么会发生这种情况。我认为这是因为当您指定宽度时，您是在告诉它内部框(实际输入区域)有多大。文本框还带有边框作为标准，每个边框为 2 像素，这是文本区域宽度的附加尺寸。添加上面的 CSS 会改变宽度的计算方式。当我将文本框的边框设为 1px 时，它只比选择框大 2px。这似乎可以解释这一点。