CSS – Hack para display inline-block no IE7

O IE7 tem uma série de limitações, mesmo utilizando-se o CSS2, umas das limitações mais importantes do IE7 é o estilo “dispaly:inline-block“, que dá aos elementos as características de um bloco junto com as características de um elemento “inline“.

Como por exemplo, os blocos não aceitam alinhamento ao centro quando o pai do dele tem “text-align:center“, só quando você utiliza no próprio bloco “margin:0 auto“, mas não funciona quando você quer colocar mais de um bloco, um ao lado do outro, e estes alinhados ao centro.

A solução para este caso é usar um hack no CSS, onde só o IE7 irá ler este estilo. Como ficaria:

.elemento {
display:inline-block;
*display:inline; /* IE7 */

}

Todo estilo no CSS que você utilizar o asterísco (*) na frente, somente o IE7 irá reconhecê-lo, por isso é importante que este venha depois do estilo utilizado para os demais navegadores. Esse exemplo também é bom para resolver problemas em alinhamentos que só no IE7 estão quebrando.

Bem, esta é a solução, no IE7 você precisa transformar o elemento em “inline“. No caso, o elemento não pegará os estilos de altura e largura, mas você poderá usar “padding-top” e “padding-bottom” para criar seu bloco. Já nos demais navegadores, os elementos “inline” não podem ter “padding-top” e “padding-left“.

Esta não é a melhor solução, mas é a que melhor resolve o problema, na medida do possível. Caso não fique feliz com o resultado, utilize o “display:block” mesmo, com “float” e seja feliz. Afinal, ainda existem clientes que utilizam o IE7, então eles querem exatamente como está o layout, aí não há como fugir.

Qualquer dúvidas, só entrar em contato e eu tento ajudar, mas espero que este post evite a morte de algum desenvolvedor.

Quem quiser acrescentar algo, só mandar.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *