为什么 select 的高度比 input[type=text] 略大？答案

【问题标题】：Why does select have a slightly larger height than input[type=text]?为什么 select 的高度比 input[type=text] 略大？
【发布时间】：2018-03-11 06:10:40
【问题描述】：

我不明白为什么select 元素的高度大于input[type="text"]。

我认为line-height 控制了像select 和input 这样的内联元素的高度，但对于select 元素，它的工作似乎略有不同。

示例：http://jsfiddle.net/Dismissile/mnBsV/

我正在设置以下样式：

input[type="text"], select {
    padding: 2px;
    border: 1px solid #ccc;
    margin: 0;
    line-height: 16px;
    font-size: 14px;
}

我认为这些元素会表现得像这样：

16px + 4px + 2px（行高 + 内边距 + 边框）= 22px

这是它对输入所做的，但选择正在做：

18px + 4px + 2px

18px 是从哪里得到的？为什么它们不一致？在 IE8 和 Chrome 15 中都对此进行了测试。

【问题讨论】：

标签： html css

【解决方案1】：

我找不到任何关于表单元素应该有多高的明确参考，但在 http://www.w3.org/TR/css3-ui/#appendix D 他们确实提到了选择的默认高度是

select[size] {
 appearance: list-menu;
 display: inline-block;
 height: attr(size,em);
}

它的高度来自字体大小，而其他所有输入都具有相同的样式属性。因此，选择与所有其他元素的高度不同是有效的。但是，无论如何我都找不到定义它们的标准（请注意链接如何表示它是信息性而非规范性的）。

所以它们的尺寸不同，因为没有人说它们应该是相同的尺寸。

【讨论】：

如果输入框和选择框共享相同的样式规则就好了。

【解决方案2】：

我能够让您的代码正常工作。

诀窍是：

将display 设置为block，以便使用height 属性。
将box-sizing 属性设置为content-box。这样做会将SELECT的内容区域设置为高度，但请记住margin、border和padding的值不会在SELECT的宽度/高度中计算，因此请调整相应的值。

示例

select {
    display: block;
    padding: 6px 4px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    height: 15px;
}

请查看您更新后的jsFiddle。

【讨论】：

【解决方案3】：

选择组件有一个隐含的button 和outset border，解决方案是使用height 和box-sizing: border-box。

【讨论】：