Neste tutorial, vou passar um truque já um pouco velho, mas que ainda ajuda a corrigir o problema da propriedade display: inline-block no IE6 e IE7.
Normalmente, quando queremos que um elemento seja posicionado na mesma linha de outros elementos em HTML e CSS, utilizamos float: left ou right;, porém, pode ser que em alguns layouts seja necessário utilizar outra propriedade. Um exemplo disso, é quando você deseja alinhar elementos posicionados em linha, mas, centralizados na tela.
Vamos sujar as mãos com um pouco de código HTML e CSS para vermos o que acontece.
Problema de elementos em linha com float: left;
Suponhamos que seu menu seja como o código apresentado abaixo:
<ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> Artigos </a> </li> <li> <a href="#"> Suporte </a> </li> <li> <a href="#"> Produtos </a> </li> <li> <a href="#"> Contato </a> </li> </ul>
E em seu arquivo CSS você tenha utilizado float: left; para todos os elementos <li> da lista:
ul li{
list-style:none;
float:left;
margin:0;
padding:0;
}
Show de bola, atingiu seu objetivo, porém, suponhamos que você queira um background no seu menu. Na lógica basta que eu configure o elemento <ul>, certo?
ul{
width:100%;
background:red;
}
ul li{
list-style:none;
float:left;
margin:0;
padding:0;
}
Claro que não! Não vai funcionar por um motivo, como os elementos <li> estão flutuantes, o container <ul> não detecta sua altura, ou seja, seria como se os elementos <li> não existissem dentro de <ul>.
Certo, aí como você é muito esperto, já deve ter logo pensado em utilizar um "clearfix", certo?
ul{
width:100%;
background:red;
overflow:hidden; /* Clearfix */
}
ul li{
list-style:none;
float:left;
margin:0;
padding:0;
}
Parabéns, você atingiu o objetivo de configurar seu menu. Mas… (sempre tem um mas…), se o seu cliente pedir para você alinhar este menu ao centro da tela?
Você me responde: Fácil, simplesmente configuro a largura do menu na largura exata de todos os elementos <li> e aplico uma margem automática nas laterais:
ul{
width:50%;
background:red;
overflow:hidden;
margin:0 auto;
}
Muito bom! Resolveu o problema, certo? Certo!
Agora seu cliente quer que você adicione mais um item no menu, provavelmente ele também vai querer um submenu e a possibilidade de alterar o texto de todos os menus.
Aí você decide que tem que fazer o menu de outra maneira e descobre a propriedade "display: inline-block;" ao invés de "float: left;".
Problema de elementos em linha com display: inline-block no IE6 e IE7
Agora vai, fiz o menu e configurei tudo certinho, está perfeito:
body,
html{
text-align:center;
}
ul{
width:100%;
background:red;
}
ul li{
list-style:none;
margin:0;
padding:0;
/* Novo estilo */
display: inline-block;
}
Problema é que ao testar no IE6 e IE7, ambos simplesmente ignoraram a opção display: inline-block;.
Veja exemplo de screenshots do Firefox e do IE6:
Firefox
Internet Explorer 6 (e provavelmente no IE7 também)
Certo, vamos corrigir isso pra você com apenas mais duas linhas no seu CSS, veja logo abaixo.
A solução para display: inline-block no IE6 e IE7
O Internet Explorer (a maioria das versões antigas) tem alguns BUGs bem estranhos, mas em alguns casos, como o caso da propriedade que estamos falando, existem soluções que podem resolver a maioria dos problemas:
Na verdade, basta adicionar o código abaixo no elemento que você quer que seja exibido em linha:
*display: inline; zoom: 1;
No nosso exemplo ficou assim:
body,
html{
text-align:center;
}
ul{
width:100%;
background:red;
}
ul li{
list-style:none;
margin:0;
padding:0;
/* Novo estilo */
display: inline-block;
*display: inline;
zoom: 1;
}
E pronto, resolveu o problema.
Um pouco além
Claro que sua configuração não vai terminar por aí, provavelmente você vai querer um "padding" nos links (<a>) dentro dos elementos <li>. Não se esqueça de configurar a opção "display: block;" para os links, por exemplo:
ul li a{
display:block; /* Atenção aqui */
padding:20px;
margin:5px;
background:green;
}
Se você não configurar os links como block, seu "padding" não vai funcionar como esperado no IE.
Concluindo
Como eu disse, este é um hackzinho antigo que já venho utilizando há tempos. Salva a minha vida em alguns layouts!
Não se esqueça, se tiver dúvidas é só perguntar, farei o possível para ajudar.
Boa sorte nos seu próximos layouts.
