RGBA() non funziona in IE8

Question

Ho appena bloccato con la manipolazione RGBA() in jQuery utilizzando IE 8

Finora ho questo:

$('.set').click(function (e) { 
     var hiddenSection = $('div.hidden'); 
     hiddenSection.fadeIn() 
     .css({ 'display': 'block' }) 
     .css({ width: $(window).width() + 'px', height: $(window).height() + 'px' }) 
     .css({ top: ($(window).height() - hiddenSection.height())/2 + 'px', 
      left: ($(window).width() - hiddenSection.width())/2 + 'px' 
     }) 
     .css({ 'background-color': 'rgba(0,0,0,0.5)' }) //Problem here in IE8 
     .appendTo('body'); 
     $('span.close').click(function() { $(hiddenSection).fadeOut(); }); 
}); 

Funziona in tutti gli altri browser, Don Non so perché il suo fallimento in IE 8 ho avuto questo errore!

Invalid property value in jquery.min.js.

Qualsiasi aiuto è molto apprezzato!

Grazie

Answer 1

Risposta semplice: IE8 non supporta le proprietà RGBA. Conosce solo RGB.

Il supporto RGBA è stato aggiunto solo in IE9.

Altri browser molto vecchi potrebbero non supportare anche RGBA. Tuttavia, non ci sono molti browser vecchi che sono ancora in uso diversi da IE8.

ci sono alcuni modi si potrebbe risolvere questo:

• utilizzare un polyfill come CSS3Pie. Questo ti permetterà di specificare i colori di sfondo RGBA nel tuo CSS. Non sarai ancora in grado di usarlo direttamente nel codice JS come tu l'hai, ma potresti cambiare classe per affrontarlo.

• Utilizzare uno strumento come Modernizr per rilevare se il browser supporta questa funzionalità e fornire funzionalità diverse in caso contrario.

• Utilizzare lo stile IE8 -ms-filter per ottenere l'effetto di trasparenza. Questo ti permette di impostare una serie di effetti speciali, inclusa l'opacità. Questa è una caratteristica di IE non standard, ed è sostituita dal CSS standard in IE9/10, ma è comunque utile in alcuni casi per le vecchie versioni di IE.

• Utilizzare invece una piccola immagine PNG con un canale alfa come sfondo. Un peccato per l'utilizzo di un'immagine di sfondo per uno sfondo a tinta unita in questi giorni, ma otterrà il risultato che stai cercando in tutti i browser.

Answer 2

Hai un errore di battitura. Dovrebbe essere:

rgba(0,0,0,0.5) 

Ti mancava la parte "a".

Tuttavia, non sono sicuro che IE8 supporti rgba() ... quindi, ancora una volta, jQuery ha forse un wrapper per questo?

Per sicurezza, proverei a impostare un'immagine di sfondo in formato png con trasparenza.

.css({ 'background-image': 'http://example.com/myimage.png' }) 

Mikey.

Answer 3

`rgba non è supportato da ie8.

Tuttavia, c'è un trucco per la trasparenza in i.e8

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); 

First 2 cifre #7F000000 sono opacità e successivi 6 cifre sono codice colore hexa.

7f è l'equivalente del 50%

Quindi il codice dovrebbe essere simile:

.css({ 'background-color': 'rgba(0,0,0,0.5)' }) //Problem here in IE8 
.css({'filter' : 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);'}) //IE Fallback 

Fonti: http://css-tricks.com/rgba-browser-support/

Edit: Dopo Derek Henderson commento, non voglio scrivere il codice, ma se vuoi aggiungerlo ancora solo quando è IE8, controlla jQuery.browser

Answer 4

Invece di questo:

.css({ 'background-color': 'rgba(0,0,0,0.5)' }) 

si può fare questo:

.css({ 'background-color': 'rgb(0,0,0)', 'opacity': '0.5' }) 

Questo funziona in tutti i browser.