Como resolver problema de Fade usando Jquery com PNG no Internet Explorer 8

O Internet Explorer sempre foi uma grande dor de cabeça para quem faz sites. O fato dele renderizar páginas sem usar padrões até a versão 8 sempre foi um problema enorme.

Recentemente estava fazendo um efeito de Fade In/Out usando Jquery quando percebi que imagens com transparencia em png exibiam um erro durante o fade, ficando com uma borda preta em volta da imagem, problema esse que só acontecia no Internet Explorer 8.

Pesquisei em vários sites, até achar uma solução que resolveu meu problema de forma satisfatória. Um código simples em javascript que deve ser adicionado no final da página, e adiciona um filtro a todas as imagens com extensão png carregadas na página. Apenas cole o código no final da página:

<script type=”text/javascript”>
var i;
for (i in document.images)
{
if (document.images[i].src)
{
var imgSrc = document.images[i].src;
if (imgSrc.substr(imgSrc.length-4) === ‘.png’ || imgSrc.substr(imgSrc.length-4) === ‘.PNG’)
{
document.images[i].style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’,sizingMethod=’crop’,src='” + imgSrc + “‘)”;
}
}
}
</script>

Com isso a imagem não apresenta mais borda preta e não afeta em nada o funcionamento em outros navegadores.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *