Opacidade CSS não funciona no IE8

Estou usando o CSS para indicar o texto do gatilho para uma seção deslizante jQuery: ou seja, quando você passa o mouse sobre o texto do gatilho o cursor muda para um ponteiro e a opacidade do texto do gatilho é reduzida para indicar que o texto tem uma ação de clique .

Isso funciona bem no Firefox e no Chrome, mas no IE8 a opacidade não muda.

Eu tentei uma variedade de configurações CSS sem sucesso algum.

Por exemplo

HTML:

This is the trigger text

CSS:

 .slidedownTrigger { cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -khtml-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; } 

O que está impedindo o IE de mudar a opacidade? Nota: Eu tentei isso em uma variedade de elementos diferentes, trocando a ordem das instruções CSS, e usando apenas os IE por conta própria. Eu também tentei usar

 -ms-filter: "alpha(opacity=75)"; 

mas sem sucesso.

Eu fiquei sem coisas para tentar fazer a modificação da opacidade funcionar no IE8.

Alguma ideia?

Não faço ideia se isso ainda se aplica a 8, mas historicamente o IE não aplica vários estilos a elementos que não “têm layout”.

veja: http://www.satzansatz.de/cssd/onhavinglayout.html

Definir isso (exatamente como escrevi) me serviu quando precisei:

 -moz-opacity: 0.70; opacity:.70; filter: alpha(opacity=70); 

Você precisa definir a Opacidade primeiro para navegadores compatíveis com os padrões e, em seguida, as várias versões do IE. Consultar exemplo:

mas este código de opacidade não funciona no ie8

 .slidedownTrigger { cursor: pointer; opacity: .75; /* Standards Compliant Browsers */ filter: alpha(opacity=75); /* IE 7 and Earlier */ /* Next 2 lines IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); } 

Note que eu eliminei o -moz já que o Firefox é um navegador Standards Compliant e essa linha não é mais necessária. Além disso, -khtml é depreciado, então eu eliminei esse estilo também.

Além disso, os filtros do IE não serão validados para os padrões w3c, portanto, se você quiser validar sua página, separe sua folha de estilos de normas de sua folha de estilo do IE usando uma instrução if, como abaixo:

  

Se você separar as peculiaridades do IE, seu site valerá bem.

Aparentemente, a transparência alfa só funciona em elementos de nível de bloco no IE 8. Definir exibição: bloco.

Usando display: inline-block; funciona no IE8 para resolver esse problema.

FWIW, opacity: 0.75 funciona em todos os navegadores compatíveis com os padrões.

CSS

Eu costumava usar o seguinte de CSS-Tricks :

 .transparent_class { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; } 

Bússola

No entanto, uma solução melhor é usar o mixin Opacity Compass , tudo que você precisa fazer é @include opacity(0.1); e ele cuidará de todos os problemas entre navegadores para você. Você pode encontrar um exemplo aqui .

aqui está a resposta para o IE 8

E funciona para alfa para trabalhar no IE8 você tem que usar o atributo de posição para esse elemento como

posição: parente ou outro.

http://www.codingforums.com/showthread.php?p=923730

Nenhuma das respostas acima funcionou para mim, então eu apenas dei a minha tag DIV uma imagem de fundo transparente, que funcionou perfeitamente para todos os navegadores.

Este código funciona

 filter: alpha(opacity = 50); zoom:1; 

Você precisa adicionar a propriedade zoom para funcionar 🙂

Você também pode adicionar um polyfil para habilitar o uso da opacidade nativa no IE6-8.

https://github.com/bladeSk/internet-explorer-opacity-polyfill

Este é um polilinha autônomo que não requer jQuery ou outras bibliotecas. Há várias pequenas advertências que não operam em estilos in-line e, para qualquer folha de estilo que precise de opacidade em polyfil, elas devem aderir à política de segurança de mesma origem.

O uso é simples

    foo