利用CSS的box-sizing属性控制input输入框的高度

不久前记述过一篇关于侧边栏搜索框奇怪的高度问题,见《Webkit内核浏览器下搜索框大小及文字下沉问题》,后来简单处理了下,但是在各个浏览器下还是有几个像素的差异,特别是Webkit内核和其他浏览器内核的差异。

一日在网上瞎逛,偶然看见百度UFO的《如何更好地控制input输入框的高度》这篇文章,颇受启发,原来在标准模式下盒模型的变化导致了input输入框的差异,无论通过设置height还是padding,总是会有些差异,这篇文章给出了很详细的叙述。最终比较妥当的解决方案就是使用box-sizing属性,这样高度就能完美控制了。

1
2
3
4
5
6
7
input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 28px;
    *height: 22px;
}

由于IE6/7不支持这个属性, 所以需要写hack,由于IE下的默认border值是2, padding是1, 所以height需要减6像素。

后来该文作者提到了CSS Reset,也就是说一般会习惯性将input的padding设置为0,这时算下来的就少个padding-top和padding-bottom的2像素,也就是说IE6/7下需要减去2个像素,所以原先的CSS变成下面这样:

1
2
3
4
5
6
7
8
9
input {
    padding-top: 0;
    padding-bottom: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 28px;
    *height: 24px;
}

当然为了稳妥,我们先主动将padding-top和padding-bottom设置为0。

好了,问题目前算是较好解决了,如果大家还有什么好的办法记得分享哦。

2 thoughts on “利用CSS的box-sizing属性控制input输入框的高度

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据