如何将简单文本定位到与IE7中文本框中的文本相同的高度？

Question

我想将文字'开始新搜索'与输入框中的文字对齐。此问题仅在 IE7 中发生。下面是相应的图片，html和CSS

<span class="search_new_search_box"> Start new search&nbsp;&nbsp;

  <input id="search_box_second" class="search_results_input" type="text" value="$searchTO.getSearchTerm()" onfocus="if (this.value=='Please enter a keyword') {this.value = '';}"  />&nbsp;&nbsp;</span>

  <span style="float:left"><input type="image" src="images/bttn_search_result.png" value="submit"  /></span>

这里是它的CSS

.search_new_search_box{
    font:normal 12px/24px AntennaRegular, Arial, Helvetica, Sans-serif;
    float:left;
    padding-top:3px;
}
.search_results_input {
    width:300px;
    height:30px;
    font:normal 12px/24px AntennaRegular, Arial, Helvetica, Sans-serif;
    background-color:#eee;
    border:solid 1px #ccc;
    line-height:30px;
}

Answer 1

您可以指定这些元素的垂直对齐。这在IE7中为我清除了它。例如，以下是将其设置为vertical-align:middle（jsFiddle）的示例。

.search_new_search_box{
    font:normal 12px/24px AntennaRegular, Arial, Helvetica, Sans-serif;
    float:left;
    padding-top:3px;
    vertical-align:middle;
}
.search_results_input {
    width:300px;
    height:30px;
    font:normal 12px/24px AntennaRegular, Arial, Helvetica, Sans-serif;
    background-color:#eee;
    border:solid 1px #ccc;
    line-height:30px;
    vertical-align:middle;
}

你不必指定中间，只需做一些对它们都有意义的事情。此外，并非所有垂直对齐值都能正常工作（基线，等等）此外，您只想制作这个IE7，因为它看起来不适合其他浏览器。