CSS de opacidade não funciona no IE8

143

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?

Marcus Downing
fonte
Esta pergunta relacionada / duplicada tem sua resposta, eu acho. stackoverflow.com/questions/859000/opacity-in-web-pages
Jeff Martin
Eu vi essa pergunta - o problema é a resposta: <br> <br> & nbsp; & nbsp; filtro: alfa (opacidade = 50); / * Internet Explorer / <br> & nbsp; & nbsp; opacidade: 0,5; / fx, safari, ópera, chrome * / <br> & nbsp; & nbsp; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacidade = 50)"; / * IE8 * / <br> <br> não funciona para mim (tentei novamente para verificar novamente). Eu o apliquei em um h3 que era preto e arrojado. No Firefox e Chrome, a configuração de opacidade fica cinza, como seria de esperar, mas no IE8, ela fica preta.
oops - Não sabia que você não começa a usar HTML em comentários - mas eu acho que você pode ver o que estou tentando dizer
se você experimentar esses estilos em apenas uma cor sólida, eles funcionam? talvez exista algum outro CSS em conflito.
Jeff Martin
Agradável. Sim - quando eu faço uma div simples, dou uma altura e largura e uma cor de fundo vermelha, com essas configurações de opacidade, ela funciona no IE8. Sai semi-opaco. Estou lutando para ver qual é o problema. Não estou modificando a opacidade de qualquer outra coisa na folha de estilo, então não consigo pensar no que poderia estar em conflito com ela apenas para o IE.

Respostas:

65

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

Azeem.Butt
fonte
9
O IE não aplica vários estilos a elementos que "não possuem layout".
Azeem.Butt
4
Ótimo! Obrigado. Esse foi o problema. Os elementos para os quais eu estava tentando ajustar a opacidade (por exemplo, h3) não "tinham layout". Depois de lhes dar um pouco, a opacidade funcionou. Tudo o que fiz foi adicionar largura: 100%; para o h3. Obrigado por me apontar na direção certa. No entanto, parece uma loucura (se não de buggy) que o Internet Explorer faça isso.
51
O IE não aplica muitos estilos a muitos elementos.
danwellman
1
@danwellman e também faz muitas outras coisas "divertidas". Yay.
Dudewad 12/09/14
Interessante é que o IE7 não precisa do layout ”. Estou usando a imagem de fundo responsiva em elemento com altura zero padding-bottom: 100%e, no IE8, a opacidade não teve efeito até eu definir a altura explícita. O IE7 não precisa disso.
Kout
158

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

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);
Gabriel McAdams
fonte
6
Obrigado, acredito "filtro: alfa (opacidade = 70);" é para IE <8. No entanto, ele não funciona (para mim) no IE8 (acabei de verificar). -moz-opacity agora está praticamente extinta, acredito, e opacidade é a maneira padrão de fazer as coisas - então, naturalmente, a Microsoft não usou essa maneira de fazer as coisas (muito fácil).
15
Apenas definir a "opacidade" e o "filtro" como você descreveu foi suficiente para fazê-lo funcionar tanto no FF4 quanto no IE8. -moz-opacidade não era necessária.
Demoncodemonkey
1
@ Gabriel McAdams: filtro: alfa (opacidade = 70); trabalhou (mas no IE 8 Only)
Poonam Bhatt
@ Gabriel Isso funcionou muito bem! Não terei mais problemas de opacidade no IE 7/8!
MJCoder
1
Informações mais específicas: Na verdade, ele desaparece No método que remove a transparência.
tmorell
49

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.

Kevin Florida
fonte
3
Apenas definir a "opacidade" e o "filtro" como você descreveu foi suficiente para fazê-lo funcionar tanto no FF4 quanto no IE8. A seção rotulada "/ * Próximas 2 linhas IE8 * /" não era necessária.
Demoncodemonkey
3
@demoncodemonkey: Correto. Tudo depende da versão que você instalou. Se você quiser compatibilidade máxima, sugiro todos eles.
Kevin Florida
Correto, mas: "Para garantir que os usuários do Internet Explorer 7 e 8 experimentem o filtro, você pode incluir as duas sintaxes listadas acima. Devido a uma peculiaridade em nosso analisador, é necessário incluir a sintaxe atualizada primeiro antes da sintaxe mais antiga. para que o filtro funcione corretamente no Modo de Exibição de Compatibilidade (este é um bug conhecido e será corrigido na versão final do IE8). Aqui está um exemplo de folha de estilo CSS: "(fonte: link )
zrathen
@ Kevin "Se você quiser compatibilidade máxima, sugiro todos eles". Bem, então, você não deveria ter removido -moz-opacidade, certo?
Spooky
As cotações não são necessárias para o filtro -ms.
thdoan
17

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

Bonnie V.
fonte
17

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.

crmpicco
fonte
5

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 .

d4nyll
fonte
2

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.

Darren Riches
fonte
1

Esse código funciona

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

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

mejiwara
fonte
1

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>
Chris Marisic
fonte