Ausdruck ihrer IT-

Wenn Sie schon einmal (oder machen ein) ein vertikales Menü haben mit Listenelemente (li)-Tags und CSS, könnte unter Umständen, dies ein weiterer Fehler im Internet Explorer, IE 6 Einsätze, wo diese Lücken zwischen Listenelemente, die Block-Level-Elemente enthalten, dh ob es einen Leerraum zwischen den Listenelementen im Markup. Danke, aber nein danke, scheint die IE-Version 7 frei von diesem Fehler.
Wenn Sie wie ich, und viele mehr, Sie zu diesem Band frustrierter Entwickler, die noch auf ihre neue Layouts, Arbeiten im IE6 zu bekommen, gehören, dann könnte dies als nützlich erweisen. Werfen Sie einen Blick ...

Probe-Markup:

<ul id="menu">
<li> <a href="#"> Startseite </ a> </ li>
<li> <a href="#"> Über </ a> </ li>
<li> <a href="#"> Dienstleistungen </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontakt </ a> </ li>
</ Ul>

Vielleicht schaffen einige CSS, ähnlich wie ein unten, um die oben Markup in ein vertikales Menü transfrom ....

Beispiel CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menü li {margin: 0; padding: 0;}
# Menü a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Die Ergebnisse sehen Sie ...

Lösung für diesen Bug ... (modifiziert / CSS fett und kursiv hinzugefügt)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * Diese enthält schwebte Listenelemente * /
}
# Menü li {
margin: 0; padding: 0;
float: left; / * Dies behebt den * /
width: 100%; / * Leerzeichen Fehler im IE6 * /
}
# Menü a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Wenn die obige Lösung doesnot zur Arbeit erscheinen (bekannten Gründen nur IE6) ... Versuchen Sie diese Methode anstelle

Fügen Sie einfach dieses zusätzliche IE6 nur Vorlagen, um Ihre Markup ...

<-! [If lt IE 7>
<style type="text/css">
# Menü li a {display: inline-block;}
# Menü li a {display: block;}
</ Style>
<[Endif] ->