Ljusbakgrundsproblem i IE

Lampor dyker upp i mitten av skärmen med en halv genomskinlig bakgrund för att ge en webbplats en bleka bakgrundseffekt. Medan olika typer av ljuslådor använder varierande kodning använder de alla cascading style sheets för att skapa den visuella aspekten av ljusboxen effekten. Internet Explorer känner emellertid inte igen CSS.

Lightbox byggs

De flesta ljuslådor använder någon form av Javascript för ljusboksseffekten. Thickbox bygger till exempel tungt på Javascript genom användning av jQuery. Omvänt har webbplatsen "Think Vitamin" en ljuskälla utformad med endast CSS och XHTML. Alexander Dawson's Semantic CSS3 ljuskälla är också IE-kompatibel. Dawson lagde några Javascript till koden för att upptäcka vilken version av IE som helst än IE 9; när en version av IE detekteras använder den en transparent PNG-bild i stället för CSS som vanligtvis används för den transparenta bakgrunden. Du kan också prova ColorBox av Jack Moore, som också fungerar i IE 6 till 9.

Bakgrundsopacitet i lampor och IE

Internet Explorer versioner 8 och tidigare uppfyller inte gällande CSS-standarder, från och med publiceringen. Bristen på överensstämmelse skapar ett problem för ljuslådor, speciellt ljusljusbakgrund, eftersom CSS skapar opacitet på ett sätt som visas i alla andra moderna webbläsare. Före CSS3 gjorde webbdesigners ett halvt genomskinligt element genom att använda attributet "opacity" -attribut eller klass i stilarket, som i:

.background {background: # 000000; höjd: 100% bredd: 100%; opacitet: 0, 5;}

Ovanstående skapar en svart bakgrund som är 50 procent transparent och fyller sidan.

Ändra opacitet att arbeta med IE

Lyckligtvis är allt inte förlorat när det gäller att ställa in insynen i ditt ljusboxens bakgrundselement i Internet Explorer. Medan attributet "opacitet" inte fungerar, gör "filtret" en. I varje element som använder "opacitet" lägger du till filterattributet för att göra det här elementet halvt transparent i Internet Explorer enligt följande:

.background {background: # 000000; höjd: 100% bredd: 100%; opacitet: 0, 5; filter: alfa (opacitet = 50);}

Den här åtgärden fungerar med Internet Explorer 6 och uppåt, och orsakar inte några visningsproblem i andra webbläsare.

CSS3

Eftersom CSS3 blir mer brett stödjad, utnyttjar fler ljusboxar sina avancerade designfunktioner. CSS3 låter dig ställa in en enda färg i ett element så transparent genom att definiera färgen i RGB-värden plus en tilläggsinställning "alfa", där opaciteten är definierad mellan 0 och 1. Till exempel är en blå bakgrund som är 50 procent transparent så här:

bakgrund: rgba (0, 0255, 0, 5);

Internet Explorer 8 och tidigare versioner stöder inte den här funktionen, all ljusbakgrundsbakgrund som använder denna funktion visas så fullständigt transparent.