Estou usando CSS para indicar o texto do gatilho para uma seção deslizante do 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 Chrome, mas no IE8 a opacidade não muda.

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

Por exemplo

HTML:

<h3 class="slidedownTrigger">This is the trigger text</h3>

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 apenas usando as do IE por conta própria. Eu também tentei usar

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

mas sem sucesso.

Eu fiquei sem coisas para tentar obter a modificação da opacidade funcionando 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 eu escrevi) me serviu quando eu precisei:

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

Você precisa definir o Opacity primeiro para navegadores compatíveis com os padrões, depois para as várias versões do IE. Consultar exemplo:

mas esse 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);
}

Observe que eu eliminei o -moz, pois o Firefox é um navegador compatível com padrões e essa linha não é mais necessária. Além disso, -khtml é depreciado, então também eliminei esse estilo.

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

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

Se você separar as peculiaridades do ie, seu site será validado.

Aparentemente, a transparência alfa funciona apenas em elementos de nível de bloco no IE 8. Defina display: block.

O uso do display: inline-block;Works no IE8 para resolver esse problema.

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

CSS

Eu costumava usar o seguinte em 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 Opacity Compass mixin , tudo que você precisa fazer é @include opacity(0.1);e ele resolverá todos os problemas do navegador. Você pode encontrar um exemplo aqui .

aqui está a resposta para o IE 8

E FUNCIONA que o alfa funcione no IE8, você precisa usar o atributo de posição para esse elemento, como

posição: relativa ou outra.

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

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

Esse código funciona

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

Você precisa adicionar a propriedade zoom para que ela funcione :)

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

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

Este é um polyfil independente que não requer jQuery ou outras bibliotecas. Existem várias pequenas advertências de que ele não opera em estilos em linha e, para todas as folhas de estilo que precisam de opacidade em polyfil, elas devem aderir à política de segurança da mesma origem.

O uso é absolutamente simples

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>