4

この問題は私を毎朝夢中にさせています。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';}" />

入力テキストをIE8以下の垂直方向の中央に配置する方法について何かアイデアはありますか？

4

1 に答える 1

6

これは簡単に修正できるはずです。line-heightプロパティは重要ですが、短縮フォントプロパティを使用している場合、IE8では失われるようです。省略形のフォントプロパティにline-heightを追加し、個別に宣言したline-heightを削除してみてください。

#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の例です（境界線は、それがどのように整列しているかを示すためだけに追加されています）。

于 2012-04-10T19:09:47.503 に答える