,

Como corrigir o BUG display: inline-block no IE6 e IE7

Corrigindo display: inline-block no IE

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

Display inline block no Firefox

Internet Explorer 6 (e provavelmente no IE7 também)

Display inline block no IE6

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.

/por