Lightbox Achtergrondproblemen in IE
Lightboxes verschijnen in het midden van het scherm met een semi-transparante achtergrond om een ​​website een vervaagd achtergrondeffect te geven. Hoewel verschillende soorten lightboxes gevarieerde codering gebruiken, gebruiken ze allemaal cascading style sheets om het visuele aspect van het lightbox-effect te creëren. Internet Explorer herkent de CSS echter niet.
Lightbox Builds
De meeste lightboxes gebruiken een of andere vorm van Javascript voor het lightbox-effect. Thickbox, bijvoorbeeld, vertrouwt zwaar op Javascript door het gebruik van jQuery. Omgekeerd bevat de website "Think Vitamin" een lightbox die is ontworpen met alleen CSS en XHTML. De Semantic CSS3 lightbox van Alexander Dawson is ook compatibel met IE. Dawson heeft Javascript aan de code toegevoegd om een ​​eerdere versie van IE te detecteren dan IE 9; wanneer een versie van IE wordt gedetecteerd, wordt een transparante PNG-afbeelding gebruikt in plaats van CSS die gewoonlijk wordt gebruikt voor de transparante achtergrond. Je kunt ook ColorBox van Jack Moore proberen, die ook werkt in IE 6 tot en met 9.
Achtergronddekking in lichtbakken en IE
Internet Explorer versie 8 en eerder voldoen niet aan de huidige CSS-standaarden, vanaf publicatie. Het ontbreken van compliantie vormt een probleem voor lightboxes, met name lightbox-achtergronden, omdat CSS ondoorzichtigheid creëert op een manier die in elke andere moderne webbrowser wordt weergegeven. Voorafgaand aan CSS3 maakten webontwerpers een element semi-transparant door de attribuuttag 'klasse' of klasse in het stijlblad te gebruiken, zoals in:
.achtergrond {background: # 000000; hoogte: 100% breedte: 100%; dekking: 0, 5;}
Het bovenstaande creëert een zwarte achtergrond die 50 procent transparant is en de pagina vult.
Dekking aanpassen om met IE te werken
Gelukkig is alles niet verloren als het gaat om het instellen van de transparantie van je lightbox-achtergrondelement in Internet Explorer. Hoewel het attribuut "opacity" niet werkt, doet het "filter" dat wel. In elk element dat "dekking" gebruikt, voegt u het filterkenmerk toe om dat element als volgt semi-transparant te maken in Internet Explorer:
.achtergrond {background: # 000000; hoogte: 100% breedte: 100%; opaciteit: 0, 5; filter: alpha (opacity = 50);}
Deze fix werkt met Internet Explorer 6 en hoger en veroorzaakt geen weergaveproblemen in andere browsers.
Naarmate CSS3 breder wordt ondersteund, profiteren meer lightboxes van de geavanceerde ontwerpfuncties. Met CSS3 kunt u een enkele kleur in een element als transparant instellen door de kleur in RGB-waarden plus een toegevoegde "alpha" -instelling te definiëren, waarbij de dekking wordt gedefinieerd tussen 0 en 1. Bijvoorbeeld een blauwe achtergrond met een 50 procent transparant uiterlijk zoals dit:
achtergrond: rgba (0, 0.255, 0.5);
Internet Explorer 8 en eerdere versies ondersteunen deze functie niet, dus elke lightbox-achtergrond die deze functie gebruikt, wordt volledig transparant weergegeven.