L'elemento guadagna una larghezza del 100% con un'altezza in IE6

Question

Sto cercando di creare un elenco orizzontale di collegamenti con < ul > in cui tutto < a > è display: block e ha un'altezza. In IE6, continua a ottenere il 100% di larghezza dopo aver impostato l'altezza per & Lt; a & Gt ;, rendendolo un elenco 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'intervallo è per qualche immagine di sfondo con effetto hover, ho provato a rimuoverlo e il suo stile, il problema rimane.

Doctype è XHTML 1.0 Strict. Beh, riesco a farlo funzionare in IE6 con solo il padding ma il padding verticale è noto per essere implementato in modo diverso in Safari rispetto ad altri browser.

La mia domanda è se c'è un modo per me di mantenere l'altezza e visualizzare: blocco (a causa di immagini di sfondo) ma senza larghezza (voglio che la lunghezza dell'elemento sia flessibile) per < a > e creare un elenco orizzontale in IE6. Grazie!

Answer 1

Gli elementi figlio mobili possono essere la correzione di cui hai bisogno:

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