水平UI導航在縮小輸出橫跨不一致

Question

我正在試驗一個水平導航菜單，通過在span標籤內添加第二行（鏈接的簡短描述），這些標籤位於每個li錨內。

它的行爲與我預期的FirefoxIE8不同，但不在Chrome中。在chrome中，當我縮小（ctrl - ）時，最右邊的li在ul下面下降，增加顯示的ul高度。

我已經注意到了這些可能的原因：

1. 我用span上我想與display:block第二行文字。我不知道另一種方法來在不使用HTML的情況下使用br /。
2. 我在li上使用了float:left，因爲display:inline在我添加上面提到的span後沒有工作。

這裏是一個image of the result in chrome after using ctrl-縮小（添加綠色背景看ul）。

這裏是我的html：

<div id="navigation"> 
<ul> 
<li><a href="#item1">first<span>first item desc</span></a></li> 
<li><a href="#item2">second<span>second item desc</span></a></li> 
<li><a href="#item3">third<span>third item desc</span></a></li> 
<li><a href="#item4">fourth<span>fourth item desc</span></a></li> 
<li><a href="#item5">fifth<span>fifth item desc</span></a></li> 
<li><a href="#item6">sixth<span>sixth item desc</span></a></li> 
</ul> 
</div> 

我的CSS：

body{ 
font-size:16px; 
min-width:984px; 
*min-width:960px} 

#navigation{ 
background:green; 
width:984px; 
*width:960px; 
min-width:984px; 
*min-width:960px; 
margin:0 auto; 
padding:0; 
display:block; 
float:left} 

#navigation ul{ 
margin:0 auto; 
width:100%; 
padding:0; 
list-style-type:none} 

#navigation ul li{ 
float:left; 
margin:0 1px; 
padding:0} 

#navigation ul li a{ 
text-decoration:none; 
font:bold 20px/1em Verdana,Arial,Helvetica,Geneva,sans-serif; 
width:162px; 
*width:158px; 
display:block; 
background:#1b4260; 
color:#cfcfcf; 
margin:0; 
padding:6px 0; 
text-indent:6px} 

#navigation ul li a:hover{ 
background:#2f5c81; 
color:#fff} 

#navigation a span{ 
display:block; 
font:normal 11px Verdana,Arial,Helvetica,Geneva,sans-serif} 

我在做什麼不正確？此外，任何建議，以改善整個菜單的代碼？

Answer 1

它看起來像是谷歌縮放時的舍入/比率問題。

常規尺寸（對於設置爲984px和UL寬度除去UL寬度）

ul width - 984px 
li a width - 162px 
li margin - 2px 

(162*6) + (2*6) = 984 

一切都適合

在

鉻（在CSS設置爲984px UL寬度）小

ul width - 820px 
li a width - 135px 
li margin - 2px 

(135*6) + (2*6) = 822 

列表項目比列表中的兩個像素寬

在Chrome較小（UL寬度去除）

ul width - 822px 
li a width - 135px 
li margin - 2px 

(135*6) + (2*6) = 822 

一切都適合，因爲UL是當寬度設置的UL寬於兩個像素

爲什麼你有兩個MIN-寬度和寬度設置在ul？