Question

我正在尝试使用水平导航菜单，在span标记内添加第二行（链接的简要说明），这些标记位于每个li锚内。

它的行为和我在firefox＆amp; IE8，但不是铬。在chrome中，当我缩小（ctrl - ）时，最右边的li在ul下面向下移动，增加了呈现的ul高度。

我注意到了这些可能的原因：

我在span的第二行上使用了display:block。如果不在html中使用br /，我就不知道另一种方法。
我在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

当google缩放时，它看起来像是一个舍入/比率问题。

常规尺寸（对于ul宽度设置为984px并删除了ul宽度）

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

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

一切都适合

Chrome较小（ul宽度设置为css中的984px）

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

上设置宽度时宽两个像素

为什么你在ul上设置了最小宽度和宽度？

水平UI导航在缩小浏览器时不一致

1 个答案: