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.

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

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

  2. 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. Ó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.

Leave a Reply

Your email address will not be published. Required fields are marked *