项目中经常有一些需求是input输入框文本居中的处理,为了兼容各个浏览器,尤其是IE,必然要做一些特殊的处理。一般情况下,我比较倾向于,只对input这一标签添加line-heigth的css样式,以完成可兼容各浏览器文本居中的操作,当然使用padding结合margin可以比较好的实现文本框文本居中,但个人感觉复杂了那么一点点,毕竟还有包裹一下额外的标签已完成文本居中,所以padding和margin的方法本文不去赘述。

单纯使用line-height来完成文本输入框的文字居中,存在一下问题:
1、IE下,line-height超过height时,文本框获得焦点后拖动鼠标或按 上下键会出现上下滚动的现象
2、chrome和safari浏览器下,标selected该文本时,选中的范围是从文本框顶部到文本的底部,体验不佳

具体效果如下图所示:

综上,使用line-height后,IE内核浏览器,文本框中的文本居中理想,而chrome和safari不够理想,而不使用line-height则,IE下居中情况不够理想,非IE内核表现比较理想,so,我们可以使用IE中的css hack “9” 是书写兼容IE与非IE 文本框文本垂直居中的css样式:

height: 40px;
line-height:40px9;

点击此处,查看示例页