L'élément gagne 100% en largeur avec une hauteur dans IE6

Question

J'essaie de créer une liste horizontale de liens avec < ul > dans lequel tous les < un > is display: block et a une hauteur. Dans IE6, il continue à prendre 100% de largeur après avoir défini une hauteur pour & Lt; a & Gt ;, en en faisant une liste verticale.

HTML:

<ul id="header">
    <li><a href="#"><span>ST.KILDA ROAD MEDICAL CENTRE</span></a></li>
    <li><a href="#"><span>Public Health Management</span></a></li>
    <li><a href="#"><span>ST.KILDA ROAD PSYCHOLOGY SERVICES</span></a></li>
    <li><a href="#"><span>OCCUPATIONAL ASSISTANCE SERVICE</span></a></li>
    <li><a href="#"><span>ST.KILDA ROAD Sports &amp; Physio</span></a></li>
</ul>

CSS:

#header {
    height:1%;
    overflow:hidden;
}
#header li {
    float:left;
}
#header li a, #header li a span {
    display:block;
    height:28px;
}

L’envergure correspond à une image d’arrière-plan à effet de survol, j’ai essayé de la supprimer et de son style, le problème persiste.

Doctype est XHTML 1.0 Strict. Je peux le faire fonctionner dans IE6 avec un simple remplissage, mais le remplissage vertical est connu pour être implémenté différemment dans Safari par rapport aux autres navigateurs.

Ma question est de savoir s'il est possible pour moi de conserver la hauteur et l'affichage: block (à cause des images d'arrière-plan) mais sans largeur (je veux que la longueur de l'élément soit flexible) pour < a > et faire une liste horizontale dans IE6. Merci!

Answer 1

Flotter les éléments enfants peut être le correctif dont vous avez besoin:

#header li a, #header li a span {
  display:block;
  height:28px;
  float:left;
}