IEで垂直方向に配置されていない入力フィールド

Question

この問題は、私を夢中にさせてくれました。私はIEで正しく整列するためにカスタムの背景で自分の入力フィールドを取得しようとしてきました。私はline-heightがそれを修正すると言った他の質問を読んだが、それはうまくいきませんでした。

それはchorme /サファリ/などで正常に見えるが、IE8にテキストが入力エリアの最上部に貼付されています。 （スタックではまだ画像を投稿できません）。私の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：IE 8と下に垂直方向に中央に私の入力テキストを取得する方法について

<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';}" /> 

任意のアイデア？

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です。