提醒:本页面将不再更新、维护或者支持,文章、评论所叙述内容存在时效性,涉及技术细节或者软件使用方面不保证能够完全有效可操作,请谨慎参考!

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

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

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变成下面这样:

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。

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