Obtendo PNG transparente para o trabalho no IE 6 no tag img

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

  •  06-07-2019
  •  | 
  •  

Pergunta

Eu tenho um png com fundo transparente que não funciona no IE 6. Eu comecei em torno do problema, substituindo as poucas tags img usando essa imagem com um DIV, e em CSS eu uso: 

#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}

o problema que eu tenho com isso é que eu, em seguida, perder alt e título atributos que não tornar o site muito acessível. Se eu usar o CSS acima com uma tag img vejo a imagem correta, mas tem a grande 'X' sobre ele que mostra ou seja, quando ele não pode mostrar uma imagem.

Todas as sugestões sobre como posso obter IE se comportar, mostrando a transparência corretamente em uma tag IMG?

Foi útil?

Solução

Uma maneira que você pode continuar a usar as tags DIV, mas continua a ser acessível é colocar um segundo tag SPAN dentro do elemento DIV e colocar o valor da ALT interior que, em seguida, estilo que não fosse fora da página .. . por exemplo ... 

div.image {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}

div.image span {
    position : absolute;
    top : -9999px;
}

Então, o HTML ficaria assim ... 

<div class="image" title="The title for the image" >
    <span>The ALT Text</span>
</div>

A tag título será ainda trabalho no DIV para que você deve estar bem nessa parte.

Eu não acho que você pode simplesmente ocultar o texto (como no display: none;) porque eu acho que os leitores de tela vão respeitar essa regra (como em não lê-lo)

Outras dicas

você poderia usar javascript para permitir a transparência no IE6. há muitos exemplos que você pode encontrar. aqui está um link para que eu tenho usado.

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

outra opção é usar HTC para o IE6 - veja aqui para solução:

http://www.twinhelix.com/css/iepngfix/

requer apenas uma linha extra adicionado ao seu arquivo css - sorry ainda pode exigir javascript -. Não muito certo

Eu usei uma ferramenta javascript pequeno para resolver este problema um par de meses atrás. É nomeado Unidade PNG FIX e é muito fácil de usar.

Enquanto alguém aqui deu uma implementação JS para isso, esta solução será também executado por FF e outros navegadores. Existem melhores ideias, por exemplo, usando a tecnologia MS:)

Um deles usa algo chamado HTC (componente hipertexto, se não me engano). É algo como ... uma CSS para o comportamento. É realmente um arquivo XML que permite anexar algumas funções para um seletor CSS. Mais uma vez, uma MS única tecnologia.

Em suma, visite este site: http://www.twinhelix.com/css/iepngfix/

Eu estou usando este withing um módulo Drupal e estou muito feliz. Se você está se perguntando, este é o módulo: http://drupal.org/project/pngbehave

Nota: isto não funciona no IE tester: http://www.my -debugbar.com/wiki/IETester/HomePage Eu estou usando um Windows 2000 com o IE6 (que funciona sob VMware, se você tem que saber) para testar sites de IE6.

IE6 suporta PNG-8 transparência, mas não PNG-24. Uma das minhas ferramentas favoritas para "consertar" IE6 é IE8.js .

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