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

给定以下代码：

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

HTML：











CSS:
#导航栏{
宽度：745px；
高度：20px；
背景图片：url（../images/bkg_nav_bar_02.png）；
保证金：5px自动；
-moz边界半径：.3em；
-webkit边界半径：.3em；
}
#导航杆{
列表样式：无；
文本对齐：居中；
}
#导航栏a{
文字装饰：无；
字体大小：.8em；
利润率：0.10px；
字体大小：粗体；
颜色：#FFFF33；
}
#李国宝{
显示：内联；
利润底部：3倍；
}
.国旗{
位置：相对位置；
浮动：对；
边界：无；
利润上限：4倍；
右边距：10px；
}

---

在Safari和Chrome中，文本链接和图像链接都是垂直对齐的，但在Firefox（3.5）中，文本链接稍微错位，有点向底部。为什么?

听起来图像的大小略大于文本的大小。

---

尝试在CSS中强制设置li的高度

听起来图像的大小略大于文本的大小。

---

尝试在CSS中强制设置li的高度

没有图像也会有同样的问题。即使没有图像。元素之间存在大小差异。强制li元素的高度大于或等于最大li元素高度的两倍。如果没有图像，也会出现相同的问题。即使没有图像。元素之间存在大小差异。强制li元素的高度大于或等于最大li元素高度的两倍。