Bug espaço em branco em Linha / Lista de Itens (LI) no IE6
Se você já fez (ou fazer um) um menu vertical usando itens da lista (li) tags e CSS, você pode encontrar, este ainda um outro bug no Internet Explorer, onde o IE 6 insere estas lacunas entre os itens de lista que contêm elementos nível de bloco, ou seja, se há qualquer espaço em branco entre os itens da lista na marcação. Obrigado, mas não, obrigado, a versão do IE 7 parece livre desse bug.
Se gosta de mim, e muitos mais, você pertence a esse grupo de desenvolvedores frustrados, que ainda têm para obter os seus novos layouts, trabalhando no IE6 também, então isso pode ser útil. Dê uma olhada ...
Marcação de exemplo:
<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Sobre </ a> </ li>
<li> <a href="#"> Serviços </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Fale Conosco </ a> </ li>
</ Ul>
Você pode criar um pouco de CSS, semelhante a um abaixo, para transfrom a marcação acima em um menu vertical ....
Exemplo de CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}
Os resultados que você verá ...
A solução para este bug ... (modificado / adicionado CSS em negrito e itálico)
# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * este contém itens de lista flutuou * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Isso corrige o * /
width: 100%; / bug * espaço em branco no IE6 * /
}
# Menu a {
bloco; cor:: display # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}
Se a solução acima doesnot parecem funcionar (por razões conhecidas apenas para IE6) ... tentar este método em vez
Basta adicionar esta adicionais IE6 estilos únicos a sua marcação ...
<! - [If lt IE 7>
<style type="text/css">
# Menu li a {display: inline-block;}
# Menu li a {display: block;}
</ Style>
<[Endif] ->










































