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

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

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