html输入并选择不同的高度答案

【问题标题】：html input and select different heighthtml输入并选择不同的高度
【发布时间】：2012-11-19 15:36:19
【问题描述】：

我设置了高度：

input,select{height: 20px;}

但在浏览器中它的高度是input : 20px 和select 18px，我不知道为什么，因为在输入和选择之前被重置。如果我删除 <!DOCTYPE html> 则可以，但 IE 无法居中页面。

【问题讨论】：

审核：stackoverflow.com/questions/10001291/…
stackoverflow.com/questions/9767612/…
@Vucko 谢谢，也许你知道默认边框颜色？ ?
@Tomas Lietuva，什么？选择还是输入框？选择：jsfiddle.net/CUA9p/632 输入：stackoverflow.com/questions/6327703/… 我个人喜欢在某些图像上使用透明输入字段。

标签： html select input

【解决方案1】：

这可以通过将元素的 box-sizing 属性设置为 border-box 来纠正：

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

moz- 或 webkit- 等供应商特定前缀可能适用。

【讨论】：

伙计，我已经找了 10 分钟了。我一天中最糟糕的 10 分钟！

【解决方案2】：

我能够将 SELECT 的高度设置为我在 IE8 和 9 中想要的高度。诀窍是将 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。您介意确认并标记适当的答案吗？

【讨论】：