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

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

不久前记述过一篇关于侧边栏搜索框奇怪的高度问题,见《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。

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

若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!

请稍后...

发表评论

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