输入字段在IE中不是垂直对齐的

Question

这个问题一直让我疯狂。我一直在尝试使用自定义背景获取输入字段以在IE中正确对齐。我读了其他问题，说行高将修复它，但这没有奏效。

它在chorme / safari / etc中看起来很好，但在IE8中，文本粘在输入区域的顶部。 （Stack不会让我发布图片）。我的CSS是：

#email {
background: url('BACKGROUND IMAGE') left top no-repeat;
background-size: 273px 38px;
width: 273px;
height: 38px;
line-height: 38px;
border: 0;
margin: 0 0 5px;
font: bold 12px arial, helvetica, sans-serif;
color: #777;
padding:0 8px;
outline: none;
float:left;
}

和HTML：

<input id="email" type="text" name="email" size="14" value="your email address" onfocus="if(this.value=='your email address') {this.style.color='#333'; this.value='';}" onblur="if(this.value== '') {this.style.color='#808080'; this.value='your email address';}" />

关于如何在IE 8及更低版本中将输入文本垂直居中的任何想法？

Answer 1

这应该很容易修复。 line-height属性很重要，但是当你使用速记字体属性时，它似乎在IE8中丢失了。尝试将行高添加到速记字体属性中，并删除已单独声明的行高。

#email {
background: url('BACKGROUND IMAGE') left top no-repeat;
background-size: 273px 38px;
width: 273px;
height: 38px;
border: 0;
margin: 0 0 5px;
font: bold 12px/38px arial, helvetica, sans-serif;
color: #777;
padding:0 8px;
outline: none;
float:left;
border:1px solid #999;
}

这里有一个 jsFiddle example （添加边框只是为了展示它是如何对齐的）。