Sto usando CSS per indicare il testo del trigger per una sezione a discesa jQuery: ovvero quando passi con il mouse sul testo del trigger, il cursore si trasforma in un puntatore e l'opacità del testo del trigger si riduce per indicare che il testo ha un'azione clic .

Funziona bene su Firefox e Chrome, ma in IE8 l'opacità non cambia.

Ho provato una varietà di impostazioni CSS senza successo.

Per esempio

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;
}

Cosa impedisce a IE di modificare l'opacità? Nota: ho provato questo su una varietà di elementi diversi, scambiando attorno all'ordine delle istruzioni CSS e usando solo quelle di IE da sole. Ho anche provato a usare

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

ma senza successo.

Ho finito le cose per provare a far funzionare l'opacità in IE8.

Qualche idea?

Non ho idea se questo vale ancora per 8, ma storicamente IE non applica diversi stili agli elementi che non "hanno layout".

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

L'impostazione di questi (esattamente come ho scritto) mi è servito quando ne avevo bisogno:

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

Devi prima impostare Opacity per i browser conformi agli standard, quindi le varie versioni di IE. Vedi esempio:

ma questo codice di opacità non funziona in 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);
}

Nota che ho eliminato -moz poiché Firefox è un browser conforme agli standard e quella linea non è più necessaria. Inoltre, -khtml è deprezzato, quindi ho eliminato anche quello stile.

Inoltre, i filtri di IE non verranno convalidati secondo gli standard di w3c, quindi se si desidera che la pagina venga convalidata, separare il foglio di stile degli standard dal foglio di stile di IE utilizzando un'istruzione if IE come di seguito:

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

Se separi le stranezze ie, il tuo sito verrà validato bene.

Apparentemente la trasparenza alfa funziona solo su elementi a livello di blocco in IE 8. Imposta display: blocco.

Utilizzando display: inline-block;funziona su IE8 per risolvere questo problema.

FWIW, opacity: 0.75funziona su tutti i browser conformi agli standard.

CSS

Usavo i seguenti trucchi CSS :

.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;
}

Bussola

Tuttavia, una soluzione migliore è utilizzare il mixin Opacity Compass , tutto ciò che devi fare è @include opacity(0.1);occuparti di tutti i problemi del browser. Puoi trovare un esempio qui .

ecco la risposta per IE 8

E FUNZIONA affinché Alpha funzioni in IE8, devi usare l'attributo position per quell'elemento come

posizione: relativa o altro.

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

Nessuna delle risposte sopra ha funzionato per me, quindi ho appena dato al mio tag DIV un'immagine di sfondo trasparente, che ha funzionato perfettamente per tutti i browser.

Questo codice funziona

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

Devi aggiungere la proprietà zoom per farlo funzionare :)

È inoltre possibile aggiungere un polyfil per abilitare l'utilizzo di opacità nativa in IE6-8.

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

Questo è un polyfil autonomo che non richiede jQuery o altre librerie. Esistono diversi piccoli avvertimenti che non opera su stili in linea e per tutti i fogli di stile che necessitano di opacità polifilati devono aderire alla politica di sicurezza della stessa origine.

L'utilizzo è semplicissimo

<!--[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>