Elemento ganha largura de 100% com uma altura no IE6
-
03-07-2019 - |
Pergunta
Eu estou tentando fazer uma lista horizontal de links com
- onde todos é display: block e tem uma altura. No IE6, ele continua recebendo largura de 100% depois que eu definir uma altura para , tornando-se uma lista vertical.
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;
}
O tempo é para alguma imagem efeito hover fundo, tentei removê-lo e seu estilo, restos de problema.
Doctype é XHTML 1.0 Strict. Bem, eu posso fazê-lo funcionar no IE6 com apenas enchimento, mas o preenchimento vertical é conhecido por ser diferente implementado no Safari do que por outros navegadores.
A minha pergunta é se existe uma maneira de me manter altura e display: block (por causa de imagens de fundo), mas sem largura (eu quero o comprimento item a ser flexível) para e fazer uma lista horizontal no IE6. Obrigado!
Solução
Floating os elementos filhos pode ser a solução que você precisa:
#header li a, #header li a span {
display:block;
height:28px;
float:left;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow