Question

我设置了身高：

input,select{height: 20px;}

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

Answer 1

可以通过将元素的box-sizing属性设置为border-box来更正此问题：

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

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

Answer 2

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

html输入并选择不同的高度

2 个答案: