为什么select有一个比输入[type = text]稍大的高度？ [英] Why does select have a slightly larger height than input[type=text]?

问题描述

我找不到为什么 select 元素的高度大于 input [type =text] line-height 控制了内嵌元素的高度，例如。 选择和 input ，但对于 select 元素来说，它看起来有些不同。 / p>



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

我设置了以下样式：

  input [type =text]，选择{
 padding：2px; 
 border：1px solid #ccc; 
保证金：0; 
 line-height：16px; 
 font-size：14px; 
} 
  

我会认为这些元素的行为如此：

16px + 4px + 2px（line-height + padding + border）= 22px

这就是它对输入做的事情，但选择是做：

18px + 4px + 2px

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

解决方案

我无法找到任何显式引用，但在 http://www.w3.org/TR/ css3-ui /＃appendix D 他们确实提到了select的默认高度是

  select [size] { 
外观：列表菜单; 
 display：inline-block; 
 height：attr（size，em）; 
} 
  

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

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

I can't figure out why the select element has a larger height than input[type="text"].

I thought that line-height controlled the height of inline elements like select and input, but it appears to work slightly different for the select element.

Example: http://jsfiddle.net/Dismissile/mnBsV/

I am setting the following style:

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

I would think that the elements would behave as such:

16px + 4px + 2px (line-height + padding + border) = 22px

This is what it does for the input, but the select is doing:

18px + 4px + 2px

Where is it getting the 18px from? Why aren't they consistent? Tested this in both IE8 and Chrome 15.

解决方案

I couldn't find any explicit references to how high the form elements should be but in http://www.w3.org/TR/css3-ui/#appendix D they do mention the default height of a select is

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

It gets its height form the font size, whereas every other input has the same style attributes. So it is valid to have a select be a different height from all the other elements. However there is no standard that I could find to define them anyway (Note how the link says it is informative not normative).

So they are different sizes because nobody said they should be the same size.

这篇关于为什么select有一个比输入[type = text]稍大的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！