2010-01-23 42 views
2

鏈接垂直取向: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; 
} 

文本鏈接是正確地垂直於Safari和鉻對齊並因此是圖像的鏈接,但在Firefox(3.5)文字鏈接稍微偏離了位置,稍微偏離底部。爲什麼?

回答

0

聲音像圖像的大小略大於文本的大小。 嘗試在CSS中強制使用li的高度。

+0

沒有圖像存在同樣的問題。 – Mirko 2010-01-24 00:00:00

+0

即使沒有圖像。元素之間的大小差異。強制li元素的高度大於或等於最大li元素的高度的兩倍。 – 2010-01-24 19:37:54