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

Question

我无法弄清楚为什么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中都进行了测试。

Answer 1

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

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

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

所以它们的大小不同，因为没有人说它们的大小应该相同。

Answer 2

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

诀窍是：

1. 将display设置为block，以便使用height属性。
2. 将box-sizing属性设置为content-box。这样做会将SELECT的内容区域设置为高度，但请注意，margin，border和padding值不会在宽度/高度中计算SELECT的{​​{1}}，因此请相应地调整这些值。

示例

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

请参阅更新后的jsFiddle。

Answer 3

选择组件具有button隐式outset border，解决方案使用height和box-sizing: border-box。