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

Question

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

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

在 Chrome 和 IE7 中测试

Answer 1

我认为这与渲染的 box-sizing 有关。选择的视觉部分小于定义宽度的框。将其包含在您的 css 中，它将看起来很正常。

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

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

参考：在 HTML 中选择输入和文本输入 - 使宽度相等的最佳方法？

编辑：我知道为什么会发生这种情况。我认为这是因为当您指定宽度时，您是在告诉它内部框的大小，即实际输入区域。文本框还带有标准边框，每个边框为 2px，这是文本区域宽度的额外大小。添加上面的 CSS 会改变宽度的计算方式。当我将文本框的边框设为 1px 时，它只比选择框大 2 px。这似乎可以解释它。