Solução para inline-block no Internet Explorer 7

Se levarmos em conta todo aquele papo de código semântico na hora de passar um layout de imagem pra html e css sempre teremos a companhia de algumas tags, e uma delas é a
<ul>, que deve ser usada para uma lista (o rly?). Ultimamente tenho trabalhado com layouts melhores e devido as exigências de onde eu trabalho, preciso codificar páginas que sejam compatíveis com o IE7, já que não damos mais suporte ao IE6.

Quando você busca utilizar uma lista e precisa estipular tamanhos e alguns outros atributos nela e nos items, você precisa utilizar o elemento “block”, e em alguns casos, se esse elemento tiver que ficar em linha, será necessário usar o “inline-block”. Mas e aí, o que tem demais? O inline-block não está implementado no IE7.

SELETOR {display:inline-block;}

Para solucionarmos esse problema, só precisamos duplicar o seletor e colocar um “* + html” antes do seletor, trocar o display por inline e pronto!

Exemplo:

* + html SELETOR {display:inline;zoom:1;}

Pronto, problema resolvido!

Aprendi com o Édipo!

 

Rafael Cavalcante

 
  • Opa! Funcionou! Muito bom, valeu por compartilhar camarada.

    Abraço

    • Por nada! Vale a pena ressaltar que você pode optar por usar “float:left” e “display:block”. Dando o mesmo efeito. Porém, terá que usar um “div.clearfix” ou algo do tipo para corrigir o container.

      Abraços! 😉

      • Roberto

        Discordo do float:left tenha o mesmo efeito do display:inline-block.
        Se vc colocar inline-block os elementos podem ficar alinhados no centro do elemento pai, se usar o float:left não ficam alinhados ao centro, essa a grande diferença.

        • São casos e casos, Roberto. O float leve pode ter o mesmo efeito do inline-block em alguns aspectos, não todos, é claro.

  • fabricio

    valeeu!! funcionou bem em todos seletores.

  • Filipe

    Salvou a patria 😀

  • Muito bom, resolveu o problema.
    Valeu !

  • Fabio

    Muito obrigado pelo hack. Funcionou perfeitamente para mim.

  • Pingback: Dica de CSS – display inline block no IE7 | Keep on Hacking in a Free World()

  • Bruno Machado

    Funcionou perfeitamente. Valeu

  • Iguatemi Garin

    Simples e direto: resolvido.
    Muitíssimo obrigado! 🙂

  • Diego Gomes

    Muito obrigado! ficou perfeito aqui para o fallback =)

    • Rafael

      Por nada, Diego! 🙂