Как расположить простой текст на той же высоте, что и текст в текстовом поле в 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 только так, как он выглядит неправильно в других браузерах.