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-somospara o Firefox e outros navegadores respeitaveis; - Defina um
.msie #quem-somospara todos os MSIEs; - Defina um
.msie6 #quem-somosespecí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 ao140px 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 atributoopacity, 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 - 17:08:09 - AntonioTerceiro
Tech
Tech Web
Create New Topic
Index
Search
Changes
Statistics
O Conteúdo deste site está licenciado sob a Licença Creative Atribuição-Uso Não-Comercial Compartilhamento pela mesma Licença 2.5 Brasil Commons.
 |
|
Copyright © 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