Dica de CSS – display inline block no IE7

Sou um desenvolvedor Web então utilizo muito CSS.

Uma das coisas mais chatas dessa área para mim é ter que adequar tudo o que faço para o Internet Explorer. Até a chegada do IE9, muitas coisas que funcionavam no Firefox, Chrome, etc, não eram reconhecidas pelo navegador da Microsoft sendo necessário contornar a situação com hacks.

Um dos maiores problemas para mim era o display inline-block que permite uma lista encadeada de objetos dispostos como um bloco em linha. Vejam um exemplo aqui.

O IE7 não reconhece a propriedade display:inline-block e hoje, finalmente, consegui achar um hack que me satisfez.

Segue os códigos:

– Original:

.lista ul li{
width: 160px;

height: auto;

display: inline-block;
}

– Hack:

* + html .lista ul li {

display:inline;

zoom:1;
}

Não é necessário alterar o que funciona para os outros navegadores basta adicionar o hack como está acima.

Fonte: Blog do Rafael Cavalcante

Recomendo, fortemente, a leitura deste artigo: http://www.maujor.com/tutorial/haslayout.php. Ele explica muito sobre o assunto e serve para se entender porque o hack funciona. Para quem não conhece, Maujor é uma autoridade mundial em CSS.

É isso aí.

Abraço.