Lysbildebakgrunnsproblemer i IE

Lysbokser dukker opp i midten av skjermen med en halv gjennomsiktig bakgrunn for å gi et nettsted en blek bakgrunnsvirkning. Mens ulike typer lysbokser bruker variert koding, bruker de alle cascading stilark for å skape det visuelle aspektet av lysbokseffekten. Internet Explorer gjenkjenner imidlertid ikke CSS.

Lysbildebygger

De fleste lysbokser bruker noen form for Javascript for lysbokseffekten. Thickbox, for eksempel, stoler sterkt på Javascript ved bruk av jQuery. Omvendt har nettstedet "Think Vitamin" en lysboks utformet med bare CSS og XHTML. Alexander Dawson's Semantic CSS3 lysbokse er også IE-kompatibel. Dawson la til noe Javascript til koden for å oppdage hvilken som helst versjon av IE tidligere enn IE 9; Når en versjon av IE er oppdaget, bruker den et gjennomsiktig PNG-bilde i stedet for CSS som vanligvis brukes for den gjennomsiktige bakgrunnen. Du kan også prøve ColorBox av Jack Moore, som også fungerer i IE 6 til 9.

Bakgrunn Opacity i lysbokser og IE

Internet Explorer versjon 8 og tidligere er ikke i samsvar med gjeldende CSS-standarder, ved publisering. Mangelen på overholdelse skaper et problem for lysbokser, spesielt lysbakgrunnsgrunnlag, fordi CSS skaper ustabilitet på en måte som vises i alle andre moderne nettlesere. Før CSS3 laget webdesignere et element semi-gjennomsiktig ved å bruke "opacity" attributttageren eller klassen i stilarket, som i:

.background {bakgrunn: # 000000; høyde: 100% bredde: 100%; opasitet: 0, 5;}

Ovennevnte oppretter en svart bakgrunn som er 50 prosent gjennomsiktig og fyller siden.

Endre Opacity for å jobbe med IE

Heldigvis er alt ikke tapt når det gjelder å sette gjennomsiktigheten av lysboksen bakgrunnselementet i Internet Explorer. Selv om "opacity" -attributtet ikke virker, gjør "filteret" en. I ethvert element som bruker "opacity", legg til filterattributtet for å gjøre elementet delvis gjennomsiktig i Internet Explorer som følger:

.background {bakgrunn: # 000000; høyde: 100% bredde: 100%; opasitet: 0, 5; filter: alfa (opasitet = 50);}

Denne løsningen fungerer med Internet Explorer 6 og opp, og forårsaker ikke noen visningsproblemer i andre nettlesere.

CSS3

Siden CSS3 blir mer utbredt, kan flere lysbokse dra nytte av de avanserte designfunksjonene. CSS3 lar deg sette en enkelt farge i et element så gjennomsiktig ved å definere fargen i RGB-verdier pluss en ekstra "alfa" -innstilling, der opasiteten er definert mellom 0 og 1. For eksempel er en blå bakgrunn som er 50 prosent gjennomsiktig utseende som dette:

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

Internet Explorer 8 og tidligere versjoner støtter ikke denne funksjonen, og alle lysboksebakgrunner som bruker denne funksjonen, vises som helt gjennomsiktige.

Anbefalt

Branding Strategies for å forbedre bilde eller salg
2019
Markedsføringsstrategier for å forbedre sikkerheten på arbeidsplassen
2019
Bi-Weekly Vs. Bi-Månedlig Paychecks
2019