L'elemento guadagna una larghezza del 100% con un'altezza in IE6
-
03-07-2019 - |
Domanda
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 & 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!
Soluzione
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;
}