firefox 火狐 input 垂直居中

s_input input {
line-height:40px;
height: 40px;
width: 480px;
border:none;
background-image: url(../images/s_input.png);
background-repeat: no-repeat;
padding-right: 10px;
padding-left: 10px;
font-size: 14px;
}

这个效果在IE下正常显示，是垂直居中；不过在firefox中不能正常显示，而是输入行顶部对齐，想不通这个问题，后来查了许多资料，有人给出以下解决方案：

去掉line-height，这个在input标签中，不能够对firefox起作用，改用padding-top。并且给出的padding-top的值应该是padding-top:（height - foxt-size）/2。input的高度减去其字体高再除以2。

然而我在测试时，发现这个结论有些不适合。

换为我最终的CSS应该是如下：

.s_input input {
padding-top:12px;
height: 40px;
width: 480px;
border:none;
background-image: url(../images/s_input.png);
background-repeat: no-repeat;
padding-right: 10px;
padding-left: 10px;
font-size: 14px;
}

显然，在这里，padding-top的高度不是 （40-14）/2＝8

对于这个结论，我只能说写适合你的padding-top。

 

http://hi.baidu.com/loglab/blog/item/775088f07fef01a4a50f5259.html