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

【问题标题】：Why are select elements not as wide as other form elements?为什么选择元素没有其他表单元素那么宽？
【发布时间】：2012-11-22 19:09:57
【问题描述】：

如果我将 select 和 text input 设置为相同的宽度，则 select 元素的宽度总是比 text input 的宽度小几个像素。无论我以像素或百分比设置宽度，这似乎都会发生。有谁知道为什么？有什么办法可以预防吗？

在 Chrome 和 IE7 中测试

【问题讨论】：

用户代理样式，如填充、边框等
取决于用户为控件设置的样式。一些用户有不同的用户代理设置，可以修改选择元素上按钮的大小、文本框的边框等......
据我所知，这不是因为用户代理样式，因为我已经在我的 CSS 中重置了大部分样式。这两个元素具有相同的字体、字体大小、行高、内边距、边距和边框宽度，并照此呈现。然而，在选择时，宽度略小，高度实际上略高。

【解决方案1】：

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

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

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

【讨论】：

感谢其他问题的链接。我仍然不确定为什么会发生这种情况，除了表单元素通常似乎不如其他元素样式化。您的解决方案有效，但不太理想，因为 box-sizing:border-box 与 IE7 不兼容。我确实担心可能没有其他解决方案......
您也可以作为另一种不太理想的解决方案，只是将输入项的宽度缩小 4 个像素。也许是因为当您在 css 中指定宽度时，您是在告诉它内部的宽度有多大框和边框各为 2px，这是文本区域宽度的额外大小。添加上面的 CSS 会改变宽度的计算方式？当我将文本框的边框设置为 1px 时，它仅比 select 大 2 px。这似乎可以解释它。我会在上面添加这个解释。
最可靠的方法是指定输入框的默认边框宽度，然后确保每个输入框的宽度都包含边框。
所以本质上，与大多数 HTML 元素一样，输入使用 box-sizing: content-box，但 select 元素使用 box-sizing: border-box?这可能是有道理的，并解释了为什么定义 box-sizing 可以解决问题。我正在使用百分比进行响应式设计，因此将选择设置为小 2px 对我不起作用。我决定在我当前的项目中使用上面包含的 CSS 以及用于 IE7 的 this polyfill。
仍然不确定，因为设置 box-sizing: content-box;在选择上没有任何区别。