Opacity CSS non funziona in IE8

Sto usando CSS per indicare il testo trigger per una sezione slide-down jQuery: cioè quando passi il mouse sul testo del trigger il cursore si trasforma in un puntatore e l’opacità del testo trigger viene ridotta per indicare che il testo ha un’azione click .

Funziona bene con Firefox e Chrome, ma in IE8 l’opacità non cambia.

Ho provato una varietà di impostazioni CSS senza alcun successo.

Per esempio

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

Cosa sta fermando IE cambiando l’opacità? Nota: ho provato questo su una varietà di elementi diversi, scambiando l’ordine delle istruzioni CSS e usando solo quelli di IE per conto proprio. Ho anche provato a usare

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

ma senza successo.

Ho finito le cose per cercare di ottenere la modifica dell’opacità lavorando in IE8.

Qualche idea?

Non ho idea se questo si applica ancora a 8, ma storicamente IE non applica diversi stili a elementi che non hanno “layout”.

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

L’impostazione di questi (esattamente come ho scritto) mi è servita 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 come Firefox è un browser conforms agli standard e quella linea non è più necessaria. Inoltre, -khtml è ammortizzato, quindi ho eliminato anche quello stile.

Inoltre, i filtri di IE non saranno validi per gli standard w3c, quindi se vuoi che la tua pagina venga convalidata, separa il tuo foglio di stile standard dal tuo foglio di stile IE usando una dichiarazione if IE come di seguito:

  

Se si separano le peculiarità, il sito verrà validato correttamente.

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

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

FWIW, opacity: 0.75 funziona 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

Comunque, una soluzione migliore è usare il mixin Opacity Compass , tutto quello che devi fare è @include opacity(0.1); e si prenderà cura di eventuali problemi cross-browser per voi. Puoi trovare un esempio qui .

ecco la risposta per IE 8

E FUNZIONA affinchè alpha funzioni in IE8 devi usare la posizione assegnata 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 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; 

È necessario aggiungere proprietà di zoom per farlo funzionare 🙂

È anche ansible aggiungere un polyfil per abilitare l’utilizzo dell’opacità nativa in IE6-8.

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

Questo è un polyfil indipendente che non richiede jQuery o altre librerie. Ci sono molti piccoli avvertimenti che non funzionano sugli stili in linea e per tutti i fogli di stile che necessitano di polyfil’d di opacità devono aderire alla politica di sicurezza della stessa origine.

L’utilizzo è semplice

    foo