questões IE6 com PNGs transparentes

StackOverflow https://stackoverflow.com/questions/130161

Pergunta

Eu me acostumei com a idéia de que se eu quiser / precisar usar PNGs alfa-trans de uma forma cross-browser, para que eu use uma imagem de fundo em uma div e, em seguida, no IE6 somente CSS, marcar o fundo como "none" e incluir o argumento adequado "filtro".

Existe outra maneira? Uma maneira melhor? Existe uma maneira de fazer isso com a tag img e não com imagens de fundo?

Foi útil?

Solução

A linha inferior é, se você quiser transparência alfa em um PNG, e você quer que ele funcione no IE6, então você precisa ter o filtro AlphaImageLoader aplicada.

Agora, existem inúmeras maneiras de fazer isso: hacks específicas do navegador, comentários condicionais, Javascript / JQuery / JLibraryOfChoice elemento iteração, do lado do servidor-CSS servindo via UserAgent farejadores ...

Mas tudo 'em vir para baixo para ter o filtro aplicado eo fundo removido.

Outras dicas

Aqui está uma solução específica que eu gosto, usando Javascript (jQuery):

http://jquery.andreaseberhard.de/pngFix/

É fácil de adicionar a um site existente, lida com todos os tipos de imagens (botões de forma, fundos, IMG tags regulares, etc), e deixa a sua bela CSS e limpo.

É mais provável que o "melhor" caminho. Mas tenha em mente que não é apenas alfa-trans que o IE6 não implementar corretamente quando se trata de arquivos PNG; o espaço de cor é corrompido devido a IE não implementar a gama corretamente, e, assim, arquivos PNG muitas vezes mostram "mais sombrio" do que deveriam.
Uma alternativa "solução" que foi implementado em um projeto recente foi para marcar cada imagem png com uma classe "toGif", na CSS dos quais um .htc comportamento personalizado é chamado, que altera a extensão .png para .gif se o navegador é detectados a ser um temos marcado como um problema. Nós apenas incluir uma versão GIF de cada PNG ao lado dela no mesmo caminho, e se o navegador é encontrado para ser um que não lidar com PNGs corretamente, ele troca-lo com uma versão GIF da imagem. Nós, portanto, sacrificar a mistura alfa em favor da garantia de full-on transparência e precisão de cor, e fazê-lo apenas quando sabemos que provavelmente não vai olhar direito como está.
Pode não ser a solução ideal, mas é a natureza do cross-browser suponho.
Edit: Na verdade, agora que eu olhar para o projecto em questão, usamos um comportamento .htc para uma classe img chamado de "alpha", bem como que joga o filtro correto na imagem automaticamente. Então você está detectando o navegador usando javascript em vez de um IE6 só de corte CSS puro, por isso pode ser um pouco mais elegante ... mas é basicamente a mesma coisa.
Para uma introdução sobre como escrever comportamentos DHTML, tente este link .

O carregador de imagem é a única correção disponível para o IE6. Note que é suporte PNG é muito rudimentar (junto com o IE7, também), e não pode tratar corretamente em loop fundos transparentes. Eu aprendi isso da maneira mais difícil quando se tenta criar um site com um recipiente transparente. Funcionou perfeitamente no Firefox, é claro.

A correção deve ser OK para pequenas áreas de fundo e quaisquer primeiro plano gráficos transparentes, mas mais uma vez eu aconselho a concepção de um site que utiliza grandes quantidades de transparência com Internet Explorer.

No final minha solução foi exibir uma cor lisa para o IE, mas manteve a transparência para os outros navegadores. não feriu o design muito no final, felizmente.

Outra maneira de contornar isso é usar 2 imagens separadas, por exemplo um GIF e PNG transparente e direcionar seu CSS em conformidade: 

/* for IE 6 */
#banner {
    background:url(../images/banner.gif);
}

/* for other browsers */
html > #banner {
    background:url(../images/banner.png);
}

IE 6 não entende seletores CSS criança assim vai ignorar a regra, enquanto navegadores que entendem que lhe dará uma boa PNG transparente.

A única desvantagem é que você tem que ter duas imagens separadas e o projeto pode não parecer exatamente o mesmo cross-browser, mas enquanto ele não se parece quebrado você deve estar ok.

Aqui estão 2 opções que não utilizam o filtro AlphaImageLoader.

Para mim, se o envio de um emaranhado .gif para IE6 não só é viável, eu uso fogos de artifício para adicionar uma paleta IE6-friendly ao .PNG .

A solução usual para elementos img é mudar o src para apontar para um GIF transparente de 1x1 pixel e, em seguida, usar o mesmo corte do filtro.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top