Espace supplémentaire dans Ul imbriqué dans Firefox, mais pas Chrome

J'essaye de faire une barre latérale verticale pour un site Web. Il ya plusieurs éléments principaux dans le ul, et si ces éléments ont des sous-catégories, alors un nouveau ul est imbriqué dans le ul principal sous son parent li (ceci est plus évident à partir du code ci-dessous). Dans la dernière version de Chrome, cela s'affiche comme il se doit, mais dans le dernier Firefox il y a un espace entre le parent li et ses sous-éléments correspondants dans le ul imbriqué. Des pensées sur la cause?Espace supplémentaire dans Ul imbriqué dans Firefox, mais pas Chrome

Voici le code html de base:

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
     <meta charset="utf-8" /> 
     <title></title> 
     <script> 
     </script> 
     <style> 
     </style> 
     <link rel="stylesheet" href="style.css" type="text/css"> 
     </head> 
<body> 
<ul class="navigation"> 
    <li>ITEM1</li> 
    <li>ITEM2</li> 
    <ul class="navigation subitem"> 
     <li>subitem1</li> 
     <li>subitem2</li> 
     <li>subitem3</li> 
    </ul> 
    <li>ITEM3</li> 
    </ul> 
</body> 
</html>

Voici le CSS correspondant:

.navigation { 
    display: inline; 
    width: 150px; 
    margin-top: 5px; 
    padding-left: 15px; 
    text-align: right; 
    vertical-align: middle; 
} 

.subitem { 
    margin: 0px; 
    vertical-align: top; 
    top: 0px; 

} 

.navigation li { 
    display: block; 
    font-family: 'Oxygen'; 
    text-transform: uppercase; 
    font-size: 1.5rem; 
    margin-top: 15px; 
} 

.subitem li { 
    font-size: 0.6em; 
    margin-top: 3px; 
    color: rgba(0, 0, 0, 0.9); 

}

Si vous chargez ces derniers dans les deux Chrome et Firefox, vous devriez être en mesure de voir la différence.

Source

2012-09-19 Scroot

L'espace est en train de se produire à cause du "display: inline;" sur la classe .navigation. Vous pourriez essayer de le faire flotter peut-être bien.

Source

2012-09-19 16:36:54 chinabuffet

Je ne peux pas encore vous mettre en colère, mais c'est ce que j'ai fait. Merci. Je suppose que FF et Webkit ont différentes façons de rendre les éléments en ligne? – Scroot

La gestion de WebKit de toutes sortes d'aspects intéressants de la mise en page en ligne est assez boguée .... –

Ceci est invalide HTML5. L'élément UL ne peut pas avoir UL comme enfant, il ne peut avoir que LI. Pour les listes imbriquées, l'UL doit figurer dans la balise LI –

Espace supplémentaire dans Ul imbriqué dans Firefox, mais pas Chrome

Répondre

Questions connexes