在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

這應該很容易解決。行高屬性很重要，但在使用速記字體屬性時，它似乎在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你（邊框添加只是爲了顯示它是如何對齊）。