如何將簡單文本放置在與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; 
} 

你不必指定middle，只需要做一些對他們兩個都有意義的事情。此外，並非所有的垂直對齊值都可以正確工作（baseline，et。al。）另外，您只需要製作此IE7，因爲它與其他瀏覽器看起來不正確。