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

Question

我想将文本 'Start new Search' 对齐到与输入框中文本相同的高度。此问题仅发生在 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，因为它在其他浏览器中看起来不正确。