Como eliminar as diferenças de CSS do IE6 e iE5.x com o ie7.js

O ie7.js é um script muito útil e muito bom, desenvolvido nos últimos 4 anos por Dean Edwards, tem 31 kb e o grande desafio de consertar os bugs de renderização de html e css do ie 5.x e 6.

E o que ele faz realmente?

Adiciona novos seletores :
:hover
:first-child
:last-child
[attr]
[attr="value"]
[attr~="value"]
[attr|="value"]
[attr^="value"]
[attr$="value"]
[attr*="value"]

Altera as propriedades de CSS
background-attachment – > aceitando posicionamento fixo
background-image -> passando a aceitar png alpha
cursor -> ie IE5.x passa a suportar pointer
display -> converte list-item para block no IE5.x
margin -> suporta auto no ie 5.x
adiciona as propriedades max-height, max-width, min-height e min-width

Arruma até o HTML e corrige bugs como o famoso “Doubled Margin” (float: left; margin-left: 10px;)

A descrição completa do que o script faz, com exemplos, está aqui.

Como eu coloco isso no meu site?

Faça download do script clicando aqui.
Insira o seguinte código dentro da tag head:

<!--[if lt IE 7]>
    <script src="js/ie7.js" type="text/javascript"></script>
<![endif]-->

Recomendo o uso desse script para backends, administrativos, pois normalmente para corrigir um bug, o script renderiza a página do jeito comum e só depois aplica o script e isso, nuUm site grande, pode ficar com o conteúdo “dançando” antes de ser completamente carregado.

Já tem uma versão para corrigir os bugs do ie7 também (ie8.js) e pode ser baixada no site do desenvolvedor.

Você pode se interessar também por:

4 Responses to “Como eliminar as diferenças de CSS do IE6 e iE5.x com o ie7.js”

  1. 1
    Cross Browser: garanta a qualidade do seu site em todos os navegadores | TidBits Says:

    [...] de Desenvolvimento 1. IE.js do Dean Edwards O Danilo já postou sobre esse js, que minimiza os problemas do IE. Mais informações, volte ao [...]

  2. 2
    Diego Brito Says:

    Danilão, novamente parabéns pelo Blog. Tentei utilizar esse script em uma interface que estou desenvolvendo e como vc já mencionou ele renderiza a página com um atraso. Por este motivo tive que recorrer para uma solução “caseira” para fazer o IE6 aceitar o tal do “position:fixed;”. Bom, minha solução é mais simples que muitas que encontrei na web e utiliza o framework Jquery.

    Segue abaixo o código:

    $(window).scroll(function() {

    $(‘#nome_da_div’).css(‘top’, $(this).scrollTop() + “px”);

    $(‘#nome_da_div’).css(‘left’, $(this).scrollLeft() + “px”);

    });

    Os anti-scriptnianos que me perdoem, a culpa é do Bill G.!

    Abraço!

  3. 3
    Rodrigo Paulino Says:

    Ótimo script que, por sinal, elimina boa parte das diferenças. Fica devendo apenas na falta de reconhecimento do parâmetro ‘!important’, que faz diferença dependendo da forma como a página é criada.

  4. 4
    Manoel Vidal Says:

    Este script é maravilhoso, resolveu 100% dos meus problemas e terminou uma virada de madrugada com chave de ouro.

    Ótima indicação!!!

Leave a Reply