让文本框中的文本垂直居中

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

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

具体效果如下图所示:
未命名-1

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

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

点击此处,查看示例页

这篇文章目前有3条评论

  1. Joy 2013-07-19 15:46

    换主题了啊。我的宽屏看起来好怪哦,靠左的。而且背景图不够大,右边空白了一片。

    沙发王 !
    • 煎饼 2013-07-24 13:46

      帮忙再测试一下,我这没你这么大的屏,用的13′的本+22′的显示器~~

  2. 煎饼 2013-08-14 15:51

    在bae上测试评论

    板凳党 !
Leave a Reply

(必填项)

(必填项)

(可选)