Erstellen Sie eine neue einfache HTML-Testdatei und testen Sie das ul li-Tag unten.
| Nachfolgend der zitierte Inhalt: <ul> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 1</a></li> </ul> <ul> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 1</a></li> </ul> |
Test 1. Definieren Sie CSS als folgenden Code. Der Effekt ist wie folgt
| Nachfolgend der zitierte Inhalt: Klartext in Zwischenablage anzeigen und drucken? body{font-size:12px;margin:0} ul{list-style:none;margin:0;padding:0;width:120px;} ul li{background:green;height:20px;} ul li a{color:#fff;padding:0 0 0 10px;} body{font-size:12px;margin:0} ul{list-style:none;margin:0;padding:0;width:120px;} ul li{background:green;height:20px;} ul li a{color:#fff;padding:0 0 0 10px;} |
Es wurde festgestellt, dass sowohl unter IE5 als auch unter IE5.5 auf der linken Seite ein Leerzeichen vorhanden ist und unter IE5 der Zeilenabstand zwischen LI leer ist, wie unten gezeigt
Test 2. Definieren Sie CSS als folgenden Code
| Nachfolgend der zitierte Inhalt: Klartext in Zwischenablage anzeigen und drucken? body{font-size:12px;margin:0} ul{list-style:none;margin:0;padding:0;} ul li{background:green;height:20px;width:120px;} ul li a{color:#fff;padding:0 0 0 10px;} body{font-size:12px;margin:0} ul{list-style:none;margin:0;padding:0;} ul li{background:green;height:20px;width:120px;} ul li a{color:#fff;padding:0 0 0 10px;} |
Im Vergleich zu Test eins löst die einfache Platzierung von width:120px; von der Definition von ul zur Definition von li das Problem des Leerraums auf der linken Seite von IE5 und IE5.5, aber es gibt immer noch eine Lücke zwischen dem li von IE5. Wie unten gezeigt
Test 3. Definieren Sie CSS als folgenden Code
| Nachfolgend der zitierte Inhalt: body{font-size:12px;margin:0} ul{list-style:none;margin:0;padding:0;} ul li{background:green;height:20px;width:120px;vertikal-align: unten;} ul li a{color:#fff;padding:0 0 0 10px;} |
Im Vergleich zum zweiten Test fügen Sie der Definition von li Vertical-Align: Bottom hinzu. Unter IE5 ist es normal, dass der Leerzeilenabstand zwischen Li verschwindet und der Effekt in jedem Browser derselbe ist, wie unten gezeigt
Zusammenfassen
1. So lösen Sie das Problem, dass li unter IE5 Leerzeilenabstände erzeugt: Wenn li eine Breite definiert, müssen Sie Vertical-Align: Bottom in Li definieren.
2. Am besten definieren Sie die Breite nicht in UL, sondern in LI oder dem DIV außerhalb von UL.
3. Der beste Weg, LI zu schreiben, besteht darin, Höhe und Breite innerhalb von Li sowie Vertical-Align: Bottom zu schreiben (für IE5/Win-Bug) oder eine Schicht Div außerhalb von UL hinzuzufügen und die Breite und dann innerhalb von LI zu definieren Es ist nicht erforderlich, die Breite und die vertikale Ausrichtung zu definieren: unten; und die Anzeige ist normal (unter IE5 wird kein Leerzeilenabstand generiert), aber die Höhe muss noch definiert werden.