IE中的输入字段不垂直对齐答案

【问题标题】：Input Fields not Vertically Aligning in IEIE中的输入字段不垂直对齐
【发布时间】：2012-04-23 02:07:27
【问题描述】：

这个问题让我整个上午都发疯了。我一直在尝试让我的输入字段具有自定义背景，以便在 IE 中正确对齐。我读了其他问题，说 line-height 会解决它，但这一直没有奏效。

在 chorme/safari/etc 中看起来不错，但在 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：

<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 及更低版本中垂直居中的任何想法？

【问题讨论】：

标签： css forms internet-explorer

【解决方案1】：

这应该很容易解决。 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 example 给你（添加边框只是为了显示它是如何对齐的）。

【讨论】：