Opacity CSS não está funcionando no IE8

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

Pergunta

Estou usando CSS para indicar o texto do gatilho para uma seção de descendente de 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 cliques .

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 que o IE mude a opacidade? Nota: Eu tentei isso em uma variedade de elementos diferentes, trocando a ordem das declarações CSS e apenas usando as próprias IE. Eu também tentei usar

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

Mas sem sucesso.

Fiquei sem coisas para tentar fazer com que a modificação da opacidade funcione no IE8.

Alguma ideia?

Foi útil?

Solução

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".

Vejo: http://www.satzansatz.de/cssd/onhavlayout.html

Outras dicas

Definir isso (exatamente como eu escrevi) me serviu quando eu precisava:

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

Você precisa definir a opacidade primeiro para navegadores compatíveis com padrões e depois 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 -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 eu eliminei esse estilo também.

Além disso, os filtros do IE não validarão os padrões W3C; portanto, se você deseja que sua página valida, separe sua folha de estilo de padrões da sua folha de estilo IE usando uma instrução 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 validará muito bem.

Aparentemente, a transparência da Alpha funciona apenas nos elementos do nível do bloco no IE 8. Defina a 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 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 Opacity Compass Mixin, tudo que você precisa fazer é @include opacity(0.1); E isso cuidará de quaisquer problemas de navegador para você. Você pode encontrar um exemplo aqui.

Aqui está a resposta para o IE 8

E funciona para Alpha trabalhar no IE8, você tem que usar a posição atribui 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 eu apenas dei à 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 que funcione :)

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

https://github.com/bladesk/internet-explorer-pacity-polyfill

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

O uso é morto 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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top