horizontal Ul la navigation n'est pas cohérente entre broswers lors du zoom arrière

Question

J'expérimente un menu de navigation horizontal en ajoutant une deuxième ligne (brève description de lien) de texte à l'intérieur des balises span, qui se trouvent à l'intérieur de chaque ancre li.

Il se comporte comme je l'espère dans firefox & IE8, mais pas en chrome. En chrome, lorsque je fais un zoom arrière (ctrl -), l'extrême droite descend en dessous de l'ul, ce qui augmente la hauteur ul présentée.

J'ai pris note de ces causes possibles:

1. Je l'ai utilisé span sur le texte que je veux être sur la deuxième ligne avec display:block. Je ne connaissais pas un autre moyen de l'abattre sans utiliser br / dans le code HTML.
2. J'ai utilisé float:left sur le li parce que display:inline ne fonctionnait pas une fois que j'ai ajouté le span mentionné ci-dessus.

Voici un image of the result in chrome after using ctrl- pour effectuer un zoom arrière (arrière-plan vert ajouté pour voir ul).

Voici mon 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> 

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

Qu'est-ce que je fais mal? En outre, n'importe quel conseil pour améliorer le code de ce menu global?

Answer 1

Il semble que ce soit un problème d'arrondi/ratio lorsque google zooms.

taille régulière (pour la largeur du ul fixé à 984px et largeur ul enlevé)

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

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

Tout se

plus petite en chrome (largeur ul fixé à 984px en css)

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

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

Les éléments de la liste sont deux pixels plus larges que votre liste

Plus petit dans Chrome (largeur ul enlevé)

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

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

Tout se parce que la ul est de deux pixels plus large que lorsque la largeur est définie sur la ul

Pourquoi avez-vous tous les deux min- largeur et la largeur définie sur le ul?