Problemi di sfondo Lightbox in IE

Le immagini vengono visualizzate al centro dello schermo con uno sfondo semitrasparente per conferire a un sito Web un effetto di sfondo sbiadito. Mentre i diversi tipi di lightbox utilizzano una codifica diversa, tutti usano fogli di stile a cascata per creare l'aspetto visivo dell'effetto lightbox. Internet Explorer, tuttavia, non riconosce il CSS.

Build di Lightbox

La maggior parte dei lightbox utilizza qualche forma di Javascript per l'effetto lightbox. Thickbox, per esempio, fa molto affidamento su Javascript attraverso l'uso di jQuery. Al contrario, il sito Web "Think Vitamin" presenta un lightbox progettato utilizzando solo CSS e XHTML. Anche la lightbox Semantic CSS3 di Alexander Dawson è compatibile con IE. Dawson ha aggiunto alcuni Javascript al codice per rilevare qualsiasi versione di IE prima di IE 9; quando viene rilevata una versione di IE, utilizza un'immagine PNG trasparente al posto dei CSS comunemente usati per lo sfondo trasparente. Potresti anche provare ColorBox di Jack Moore, che funziona anche da IE 6 a 9.

Opacità di sfondo in Lightboxes e IE

Le versioni di Internet Explorer 8 e precedenti non sono conformi agli attuali standard CSS, a partire dalla pubblicazione. La mancanza di conformità crea un problema per i lightbox, in particolare gli sfondi lightbox, perché il CSS crea opacità in un modo che viene visualizzato in ogni altro browser Web moderno. Prima di CSS3, i progettisti Web hanno reso un elemento semitrasparente utilizzando il tag dell'attributo "opacity" o la classe nel foglio di stile, come in:

.background {background: # 000000; altezza: 100% larghezza: 100%; opacità: 0, 5;}

Quanto sopra crea uno sfondo nero trasparente al 50 percento e riempie la pagina.

Modifica dell'opacità per lavorare con IE

Fortunatamente, non tutto è perduto quando si tratta di impostare la trasparenza dell'elemento di sfondo lightbox in Internet Explorer. Mentre l'attributo "opacità" non funziona, il "filtro" lo fa. In qualsiasi elemento che utilizza "opacità", aggiungi l'attributo filtro per rendere quell'elemento semitrasparente in Internet Explorer come segue:

.background {background: # 000000; altezza: 100% larghezza: 100%; opacità: 0, 5; filtro: alfa (opacità = 50);}

Questa correzione funziona con Internet Explorer 6 e versioni successive e non causa problemi di visualizzazione in altri browser.

CSS3

Dato che i CSS3 sono più ampiamente supportati, più lightbox sfruttano le sue funzionalità di progettazione avanzate. CSS3 consente di impostare un singolo colore in un elemento come trasparente definendo il colore nei valori RGB più un'impostazione "alpha" aggiunta, in cui l'opacità è definita tra 0 e 1. Ad esempio, uno sfondo blu con aspetto trasparente al 50 percento come questo:

sfondo: rgba (0, 0, 255, 0, 5);

Internet Explorer 8 e versioni precedenti non supportano questa funzione, quindi qualsiasi sfondo lightbox che utilizza questa funzione viene visualizzato completamente trasparente.