Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

17 2009 fevereiro

Hack para Internet Explorer 6

Autor: Carlitos em CSS, Hacks

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Já que estamos entrando no mundo “obscuro” dos hacks, iremos comentar sobre o caso específico do IE6, o qual temos que passar tantas vezes!

Ao adicionar esta linha em seu CSS, ela será interpretada somente pelo IE6:

* html { propriedade: valor; }

Particularmente preferimos adotar essa prática ao invés de um conditional comment para o IE6, para evitar de termos diversos CSS específicos para cada navegador. Portanto só usamos o CSS para IE7 caso seja extremamente necessário.

Além do mais, este hack é válido ao contrário de outras opções que encontramos em outros exemplos.

* Update: Classe no html. Como usamos html5, colocamos na tag html por conditional comments uma classe relativa ao navegador Internet Explorer.

18 comentários

Responder
  1. 17 de fevereiro de 2009

    g3 disse:

    No livro Construindo Sites com CSS e (X)HTML do Maujor, ele define este hack como “hack estrela html“. No livro tem um seguinte texto é interessante lembrar:

    … Por uma estranha razão que nunca ninguém soube explicar, o IE6 e anteriores admitem a existência de um elemento-pai para o html. Tal elemento não se sabe qual é, como ele é, ou mesmo, para que serve. Áliás, descobriu-se que ele serve para compor o hack estrela. Bizarro, não? Desta maneira, um seletor que começa com * html é entendido por aqueles navegadores e ignorado pelos demais.

  2. 17 de fevereiro de 2009

    Rodapé fixo | Blog Web Standards disse:

    […] Checklist para HTML « Hack para Internet Explorer 6 […]

  3. 17 de fevereiro de 2009

    Carlitos disse:

    O lado bom de usá-lo é que não precisamos usar algum CSS adicional, facilitando a manutenção do código CSS.

  4. 24 de outubro de 2009

    Anderson disse:

    Show de bola a dica, muito mais simples!

    Bem dito o dia que não precisarmos desse recurso!

  5. 28 de outubro de 2009

    Psysapiens disse:

    Era uma boa saída, mans… HTML5 e o CSS3 estão batendo a porta dos desenvolvedores e a cada dia vai se torna mais chato ter que ficar fazendo hacks. Fora a sujeira no código.

    []’s

  6. 6 de janeiro de 2010

    dos santos disse:

    cuidado! esse hack até pode funcionar no 6 mais tem a desvantagem de tambem ser interpletado pelo 8 como esta acontecendo com o meu explore 8 recomendo com mais eficacia ultilizar duas aspas “//” no mesmo seletor pode ate ficar grande mais funciona.

  7. 7 de janeiro de 2010

    dos santos disse:

    ultilizo todos os hacks necessario pro estupido IE intrepetar minha pagina corretamente mais muitas vezes não funciona, então procurando descobrir que colocando uma simples resolução no elemento do seletor que considero mais !important pode ajudar

  8. 28 de janeiro de 2010

    Mi disse:

    @dos santos: @dos santos:

    cuidado! esse hack até pode funcionar no 6 mais tem a desvantagem de tambem ser interpletado pelo 8 como esta acontecendo com o meu explore 8 recomendo com mais eficacia ultilizar duas aspas “//” no mesmo seletor pode ate ficar grande mais funciona.

    Não entendi onde deveria colocar as aspas… coloquei em vários lugares mas nao funcionou..

  9. 28 de janeiro de 2010

    Carlitos disse:

    É um bom ponto essa questão do IE8.
    Mas dependendo do site, isso tudo é facilmente resolvido inserindo uma META Tag que “manda” o IE8 renderizar como o IE7, assim ele não intepreta os hacks pro IE6:

    <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

  10. 26 de março de 2010

    Radial shadow background disse:

    […] os parâmetros precedidos pelo hack estrela os tornam específicos para o IE6. O position é novamente atribuído agora com o valor absolute e […]

  11. 27 de abril de 2010

    Lucas Moreira disse:

    Sim, o hack estrela até funciona, mas a W3C não valida!
    O melhor de todos (na minha opinião) é o cometário condicional. Pois funciona numa boa e á válido. Se o projeto for bem organizado, alguns css a mais não vai atrapalhar.

  12. 5 de maio de 2010

    g3 disse:

    Esse código funciona e é válido pelo w3c, o único problema dele que não tem lógica, pois não existe um elemento que envolve a tag “html”. Façam um teste no serviço de validação de CSS (http://jigsaw.w3.org/css-validator/#validate_by_input) testem o um código como esse: * html div#conteudo { margin: 0 auto; }

  13. 29 de julho de 2010

    Mário Sérgio disse:

    Valeu!
    Resolveu aqui a solução que estava procurando.
    Só não sei como resolver outro problema que estou aqui com todas as versões do IE.
    Ex:
    div#conteudo{
    background-image:url(imagem/topo.jpg)repeat-x top;
    }
    Simplesmente esse pequeno código não esta qurerendo aparecer na minha DIV, é mole?
    Alguém sabe algum tipo de HACK para funcionar?
    Abs!

  14. 29 de julho de 2010

    Carlitos disse:

    @Mário Sérgio:
    Obrigado pelo comentário Mário!

    A sua regra não funciona pois você usou “background-image” e ela só deve ser usada quando colocar o caminho da imagem como valor.
    O resto “repeat-x top” só funciona se você usar a propriedade “background” ao invés de “background-image” ok?

    Assim ficaria:
    div#conteudo{ background: url(imagem/topo.jpg) repeat-x top; }

  15. 29 de julho de 2010

    Mário Sérgio disse:

    @Carlitos:
    Ainda continua com o problema. É uma coisa tão simples que chega a ser gozado.
    Simplesmente não aparece o meu background repetido na horizontal.

  16. 13 de agosto de 2010

    Listagem horizontal com itens de mesma altura | Blog Web Standards disse:

    […] Hack para IE6; […]

  17. 10 de março de 2011

    Renie disse:

    Ainda na linha de hacks validados pela W3C e que não precisam de condicionais, temos o hack que somente o IE7 interpreta.

    *+html

    Segue a fonte também 😉

    http://www.maujor.com/blog/2006/05/02/hack-css-ie7/

  18. 16 de maio de 2016

    Mas hein! disse:

    @Mário Sérgio:
    ahticatá…. bicho mentiroso rapá!!!

Escreva seu comentário