CSS/HTML alignement vertical des liens dans la barre de navigation horizontale

Question

Vu le code suivant:

HTML: 

<div id="nav_bar"> 
    <ul> 
     <li ><a href="#" class="current">HOME</a></li> 
     <li><a href="#">GALLERY</a></li> 
     <li><a href="#">TO DRINK</a></li> 
     <li><a href="#">TO EAT</a></li> 
     <li><a href="#">LOCATION</a></li> 
     <li><a href="#">CONTACT</a></li> 
     <li><a href="#"><img class="flag"src="images/italy_flag.png" alt="" /></a></li> 
     <li><a href="#"><img class="flag"src="images/uk_flag.png" alt="" /></a></li> 
     <li><a href="#"><img class="flag"src="images/spain_flag.png" alt="" /></a></li> 
     </ul> 
</div> 

CSS: 

#nav_bar{ 
width:745px; 
height:20px; 
background-image:url(../images/bkg_nav_bar_02.png); 
margin:5px auto; 
-moz-border-radius:.3em; 
-webkit-border-radius:.3em; 
} 
#nav_bar ul{ 
list-style:none; 
text-align:center; 
} 
#nav_bar a{ 
text-decoration:none; 
font-size:.8em; 
margin:0 10px; 
font-weight:bold; 
color:#FFFF33; 
} 
#nav_bar li{ 
display:inline; 
margin-bottom:3px; 
} 
.flag{ 
position:relative; 
float:right; 
border:none; 
margin-top:4px; 
margin-right:10px; 
} 

Les liens de texte sont alignés vertical correctement dans Safari et Chrome et sont donc les liens d'image, mais dans Firefox (3.5) les liens de texte sont légèrement hors position, un peu vers le bas. Pourquoi?

Answer 1

Cela ressemble à la taille de l'image est légèrement plus grande que la taille du texte. Essayez de forcer la hauteur du li dans CSS.