Comment positionner le texte simple à la même hauteur que le texte dans la zone de texte dans IE7?

Question

Je souhaite aligner le texte 'Démarrer une nouvelle recherche' à la même hauteur que le texte dans la zone de saisie. Ce problème se produit uniquement dans IE7. Ci-dessous l'image, HTML et CSS il

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

et voici le CSS pour qu'il

.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

correspondant Vous pouvez spécifier la verticale aligner sur ces éléments à quelque chose. Cela me le clarifie dans IE7. Par exemple, voici un exemple avec 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; 
} 

Vous n'avez pas besoin de spécifier le milieu, faites juste quelque chose de logique pour les deux. De même, toutes les valeurs d'alignement vertical ne fonctionneront pas correctement (baseline, etc.). En outre, vous ne devez pas utiliser IE7 uniquement, car il ne semble pas fonctionner correctement avec les autres navigateurs.