html - 水平导航栏中链接的 CSS/HTML 垂直对齐

Question

给定以下代码:

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

文本链接在 Safari 和 Chrome 中正确垂直对齐，图像链接也是如此，但在 Firefox (3.5) 中，文本链接稍微错位，有点靠近底部。为什么？

Answer 1

听起来图像的大小略大于文本的大小。尝试在 CSS 中强制 li 的高度。