{"id":1485,"date":"2008-12-18T10:33:00","date_gmt":"2008-12-18T13:33:00","guid":{"rendered":"https:\/\/felipeelia.com.br\/?p=1485"},"modified":"2019-12-15T11:34:36","modified_gmt":"2019-12-15T14:34:36","slug":"png-no-ie-6-entenda-como-o-problema-e-resolvido","status":"publish","type":"post","link":"https:\/\/felipeelia.com.br\/png-no-ie-6-entenda-como-o-problema-e-resolvido\/","title":{"rendered":"PNG no IE 6 – Entenda como o problema \u00e9 resolvido"},"content":{"rendered":"\n
Este post foi migrado l\u00e1 do\u00a0Melancia na Cabe\u00e7a<\/a>. Ele tem muito<\/strong> tempo, resolve um problema que obviamente n\u00e3o existe mais, mas estou mantendo s\u00f3 por raz\u00f5es hist\u00f3ricas \ud83d\ude42<\/em><\/p>\n\n\n\n ATEN\u00c7\u00c3O:<\/strong> Para verificar a renderiza\u00e7\u00e3o do png no IE 6 use o pr\u00f3prio Internet Explorer 6 e n\u00e3o o Multiple IE<\/strong> (que por sinal n\u00e3o recomendo pra mais ningu\u00e9m). Se n\u00e3o tiver acesso a um computador com esse browser \u00e9 poss\u00edvel testar atrav\u00e9s do uso de uma m\u00e1quina virtual.<\/p>\n\n\n\n O formato de arquivos PNG surgiu para substituir o limitado formato GIF, diferindo deste no suporte a canal alfa, no maior n\u00famero de cores e na alta compress\u00e3o poss\u00edvel. Por outro lado o Internet Explorer 6, navegador xing-ling ainda muito usado, n\u00e3o d\u00e1 suporte nativo \u00e0 transpar\u00eancia do PNG, mas \u00e9 poss\u00edvel contornar esse problema com uma propriedade CSS.<\/p>\n\n\n\n N\u00e3o vou publicar nenhuma solu\u00e7\u00e3o aqui, mas explicar como todas elas funcionam (sim, elas funcionam da mesma forma). Para que a imagem fique transparente voc\u00ea deve sumir com a imagem em si e exibi-la somente com a propriedade Voc\u00ea pode fazer isso com javascript, com coment\u00e1rios condicionais, com a propriedade CSS Para uma solu\u00e7\u00e3o mais gen\u00e9rica o uso do javascript \u00e9 mais recomendado, at\u00e9 porque n\u00e3o afeta tanto a acessibilidade. E quer saber do que mais: est\u00e1 mais do que na hora do IE6 come\u00e7ar a sumir.<\/p>\n\n\n\n Para uma solu\u00e7\u00e3o copy\/paste esse site<\/a> parece muito bom. A do behavior desse site<\/a> \u00e9 bem legal tamb\u00e9m.<\/p>\n\n\n\nfilter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<caminho_da_imagem>', sizingMethod='image');<\/code>.<\/p>\n\n\n\n
behavior<\/code> ou com uma combina\u00e7\u00e3o de todas elas. Aqui no Melancia a logo do cabe\u00e7alho \u00e9 um png e para que ela ficasse do jeito que est\u00e1 usei uma combina\u00e7\u00e3o de coment\u00e1rios condicionais e CSS. A imagem est\u00e1 dentro de um
span<\/code> que s\u00f3 existe nos IE < 7, por causa dos coment\u00e1rios condicionais – veja o c\u00f3digo-fonte para entender melhor – e nesses navegadores (argh!) a imagem de dentro n\u00e3o \u00e9 renderizada (display:none) e o span assume sua fun\u00e7\u00e3o.<\/p>\n\n\n\n