Créez un nouveau fichier de test HTML simple et testez la balise ul li ci-dessous.
| Voici le contenu cité : <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> </ul> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> </ul> |
Test 1. Définissez CSS comme le code suivant, l'effet est le suivant
| Voici le contenu cité : afficher la copie ordinaire dans le presse-papiers ? corps{font-size:12px;margin:0} ul{list-style:aucun;marge:0;padding:0;largeur:120px;} ul li{fond:vert;hauteur:20px;} ul li a{couleur:#fff;padding:0 0 0 10px;} corps{font-size:12px;margin:0} ul{list-style:aucun;marge:0;padding:0;largeur:120px;} ul li{fond:vert;hauteur:20px;} ul li a{couleur:#fff;padding:0 0 0 10px;} |
Il a été constaté qu'il y avait un espace vide sur le côté gauche sous IE5 et IE5.5, et sous IE5, l'espacement des lignes entre LI est vide, comme indiqué ci-dessous.
Test 2. Définissez CSS comme le code suivant
| Voici le contenu cité : afficher la copie ordinaire dans le presse-papiers ? corps{font-size:12px;margin:0} ul{list-style:aucun;marge:0;padding:0;} ul li{fond:vert;hauteur:20px;largeur:120px;} ul li a{couleur:#fff;padding:0 0 0 10px;} corps{font-size:12px;margin:0} ul{list-style:aucun;marge:0;padding:0;} ul li{fond:vert;hauteur:20px;largeur:120px;} ul li a{couleur:#fff;padding:0 0 0 10px;} |
Par rapport au premier test, le simple fait de placer width:120px; de la définition de ul à la définition de li résout le problème de l'espace vide sur le côté gauche d'IE5 et d'IE5.5, mais il existe toujours un écart entre le li d'IE5. Comme indiqué ci-dessous
Test 3. Définissez CSS comme le code suivant
| Voici le contenu cité : corps{font-size:12px;margin:0} ul{list-style:aucun;marge:0;padding:0;} ul li{fond:vert;hauteur:20px;largeur:120px;alignement vertical: bas;} ul li a{couleur:#fff;padding:0 0 0 10px;} |
Par rapport au deuxième test, ajoutez vertical-align: bottom à la définition de li ; c'est normal sous IE5, l'espacement des lignes vides entre li disparaît et l'effet est le même dans chaque navigateur, comme indiqué ci-dessous.
Résumer
1. Comment résoudre le problème selon lequel li génère un espacement de ligne vide sous IE5 : Si li définit une largeur, alors vous devez définir vertical-align: bottom in li;
2. Il est préférable de définir la largeur non pas en UL, mais en LI ou en DIV en dehors de UL.
3. La meilleure façon d'écrire LI est d'écrire la hauteur et la largeur à l'intérieur de li, ainsi que vertical-align: bottom; (pour le bug ie5/win), ou d'ajouter une couche de div à l'extérieur de ul et de définir la largeur, puis à l'intérieur de li. Il n'est pas nécessaire de définir la largeur et le vertical-align: bottom;, et l'affichage sera normal (aucun interligne vide ne sera généré sous IE5), mais la hauteur doit quand même être définie.