logo标签列表

HTML输入框和下拉菜单高度不同

htmlselectinput
10

我设置了高度：

input,select{height: 20px;}
但是在浏览器中，它的高度为input: 20px和select 18px，我不知道为什么，因为之前重置了输入和选择。如果我删除<!DOCTYPE html>，那么就可以解决问题，但IE不能居中页面。
评论：https://dev59.com/r2kw5IYBdhLWcg3wSoks - alditis
1
https://dev59.com/3Wkw5IYBdhLWcg3wm70h - Vucko
@Vucko 谢谢，也许你知道默认边框颜色是什么？ - Wizard
1
@Tomas Lietuva，是选择框还是输入框？ 选择框：http://jsfiddle.net/CUA9p/632/ 输入框：http://stackoverflow.com/questions/6327703/input-field-styling-css-problem 我个人喜欢在某些图片上使用透明输入框进行工作。 - Vucko
2个回答
12

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

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

厂商特定的前缀比如moz-或者webkit-可能会被应用。

哎呀，我找了10分钟才找到这个。是我今天最糟糕的10分钟！ - Bitterblue
2
我在IE8和9中成功地将SELECT的高度设置为我想要的大小。诀窍是将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。您能否确认并标记正确答案？
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接