간단한 텍스트를 IE7의 텍스트 상자에있는 텍스트와 같은 높이에 배치하는 방법은 무엇입니까?

Question

텍스트를 정렬하고 싶습니다. '새 검색 시작'은 입력란의 텍스트와 동일한 높이에 있습니다. 이 문제는 IE7에서만 발생합니다. 아래에

<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> 

에 해당하는 이미지, HTML과 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

에 CSS입니다. 이것은 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은 다른 브라우저에서 제대로 보이지 않기 때문에 IE7 만 만들고 싶을 것입니다.