Lysbakgrundsproblemer i IE
Lysdokumenter dukker op i midten af skærmen med en halv gennemsigtig baggrund for at give et websted en falmet baggrundseffekt. Mens forskellige typer lysbokse anvender varieret kodning, bruger de alle cascading stilark til at skabe det visuelle aspekt af lightbox-effekten. Internet Explorer genkender dog ikke CSS.
Lysbildebygger
De fleste lysbokse bruger en form for Javascript til lysbokseffekten. Thickbox afhænger for eksempel meget af Javascript ved brug af jQuery. Omvendt har hjemmesiden "Think Vitamin" en lygte designet med kun CSS og XHTML. Alexander Dawson's Semantic CSS3 lysboks er også IE-kompatibel. Dawson tilføjede nogle JavaScript til koden for at registrere enhver version af IE tidligere end IE 9; når en version af IE registreres, bruger den et gennemsigtigt PNG-billede i stedet for CSS, der almindeligvis anvendes til den gennemsigtige baggrund. Du kan også prøve ColorBox af Jack Moore, som også fungerer i IE 6 til 9.
Baggrundsopacitet i lysbokse og IE
Internet Explorer-versioner 8 og tidligere er ikke i overensstemmelse med gældende CSS-standarder, efter offentliggørelsen. Manglen på overholdelse skaber et problem for lightboxes, specielt lightbox-baggrunde, fordi CSS opretter opacitet på en måde, der vises i enhver anden moderne webbrowser. Forud for CSS3 lavede webdesignere et element semi-transparent ved at bruge attributten "opacity" eller klassen i stilarket som i:
.background {baggrund: # 000000; højde: 100% bredde: 100%; opacitet: 0, 5;}
Ovenstående opretter en sort baggrund, der er 50 procent gennemsigtig og fylder siden.
Ændring af opacitet for at arbejde med IE
Heldigvis er alt ikke tabt, når det kommer til at indstille gennemsigtigheden af dit lightbox baggrundselement i Internet Explorer. Mens attributten "opacitet" ikke virker, gør "filteret" en. I ethvert element, der bruger "uigennemsigtighed", tilføj filterattributten for at gøre elementet halv transparent i Internet Explorer som følger:
.background {baggrund: # 000000; højde: 100% bredde: 100%; opacitet: 0, 5; filter: alfa (opacitet = 50);}
Denne rettelse fungerer sammen med Internet Explorer 6 og op, og forårsager ikke nogen problemer med displayet i andre browsere.
CSS3
Da CSS3 bliver mere bredt understøttet, udnytter flere lysbokse sine avancerede designfunktioner. CSS3 giver dig mulighed for at indstille en enkelt farve i et element som gennemsigtig ved at definere farven i RGB-værdier plus en tilføjet "alpha" -indstilling, hvor opacitet er defineret mellem 0 og 1. For eksempel er en blå baggrund, der er 50 procent gennemsigtig udseende sådan her:
baggrund: rgba (0, 0, 255, 0, 5);
Internet Explorer 8 og tidligere versioner understøtter ikke denne funktion, og enhver baggrundsbakgrunds baggrund, der bruger denne funktion, vises som helt gennemsigtig.