Compatibilidade com o IE

Como documentar

Preferencialmente apresente 3 seções: problema, solução e exemplo. Descreva o problema, apresente a solução e elabore um exemplo. O objetivo é fazermos uma base de conhecimento sobre problemas de compatibilidade com IE e que seja fácil dribá-los.

Hack Aurium (CSS específico para msie)

Este é o javascript que deve ser adicionado após o body, para permitir que seja incluído um seletor CSS para o MSIE genericamente e outros para cada versão (caso seja necessário)

<body>
    <script type="text/javascript">
      /* Adds a class to "msie" to the body element if a Microsoft browser is
       * detected. This is needed to workaround several of their limitations.
       */
      if ( navigator.appVersion.indexOf("MSIE") > -1 ) {
        document.body.className += " msie msie" +
          navigator.appVersion.replace(/^.*MSIE\s+([0-9]+).*$/, "$1");
      }
    </script>
    ...
</body>

Como utilizar:
  • Defina #quem-somos para o Firefox e outros navegadores respeitaveis;
  • Defina um .msie #quem-somos para todos os MSIEs;
  • Defina um .msie6 #quem-somos específico para o MSIE 6, se precisar;

Como verificar classes adicionadas dinamicamente no body

Com o javascript acima devidamente colocado, basta executar esse javascript pela barra de endereço do navegador para confirmar o uso das classes:
javascript:alert( document.body.className )

Problema da Margem Duplicada.

Problema: O IE, as vezes, duplica o valor de margin. Fazendo com o que blocos tem espaçamento exagerado, o que frequentemente quebra o layout.

Solução: Colocar a metade do margin para o IE.

Exemplo:
#conteudo {
    float: left;
    width: 460px;
    margin-left: 14px;
    margin-bottom: 33px;
}
.msie #conteudo {
    margin-left: 7px;
}

Tamanho da Div

Problema: A altura ou largura da div está correta no Firefox, mas incorreta no IE.

Solução: Usar o atributo max-height ou max-width que somente o Firefox entende e deixar o height para o IE.

Exemplo: No exemplo abaixo, devemos setar o max-height para 140px, de forma que firefox continue funcionando. No IE, o conteúdo de height deve ser de 150px, já que corresponde ao 140px anterior + 5px * 2 (top e bottom) = 140 + 10 = 150px.
DE:
   #destaque_inner {
    background: url('%PUBURLPATH%/%WEB%/ProjetoGrafico/destaque_rodape.gif') 0% 100% no-repeat;
    height: 140px;
    padding: 5px 10px;
    overflow: auto;
   }

PARA:
   #destaque_inner {
    background: url('%PUBURLPATH%/%WEB%/ProjetoGrafico/destaque_rodape.gif') 0% 100% no-repeat;
    max-height: 140px;
    height: 150px;
    padding: 5px 10px;
    overflow: auto;
   }

Imagens PNG no layout para IE6

Problema: O IE6 não exibe o canal alfa das imagens PNG, então o que poderia ser transparente tem uma cor opaca.

Solução: Nesse caso o PNG-Fix comum não funciona. Aqui só podemos usar GIF ou PNG indexado.

Exemplo: Abra a imagem no GIMP e acesse o menu: Imagem -> Indexado. Depois salve a imagem como PNG mesmo. Infelizmente nesse caso o canal alfa é perdido e temos apenas simples transparência.

Definir opacidade no IE

Além de não suportar o atributo opacity, o IE só consegue definir opacidade (transparência) para elementos que têm uma posição explícita. Então o hack pra pegar transparência no IE é incluir zoom: 1; da seguinte forma:

.minhaclasse {
  /* 50% transparente */
  opacity: 0.5; /* todos os outros browsers */
  filter: alpha(opacity = 50); /* IE */
  zoom: 1; /* pra funcionar no IE, quando o elemento não tiver posição explícita (e.g. position: relative) */
}

referência: http://joseph.randomnetworks.com/archives/2006/08/16/css-opacity-in-internet-explorer-ie/
Topic revision: r4 - 13 Mar 2009, AntonioTerceiro
 

This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Wiki-Colivre? Send feedback