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;
}
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