Problèmes d'arrière-plan de la visionneuse dans IE

Des zones lumineuses apparaissent au centre de l'écran avec un arrière-plan semi-transparent pour donner à un site Web un effet d'arrière-plan atténué. Bien que différents types de visionneuses utilisent un codage varié, ils utilisent tous des feuilles de style en cascade pour créer l'aspect visuel de l'effet visionneuse. Internet Explorer, cependant, ne reconnaît pas le CSS.

Constructions Lightbox

La plupart des lightbox utilisent une forme de Javascript pour l’effet lightbox. Thickbox, par exemple, fait largement appel à Javascript via l'utilisation de jQuery. Inversement, le site "Think Vitamin" propose une boîte à lumière conçue en utilisant uniquement CSS et XHTML. La lightbox CSS3 lightbox de Alexander Dawson est également compatible avec IE. Dawson a ajouté du code Javascript au code afin de détecter toute version d’IE antérieure à IE 9; lorsqu'une version d'IE est détectée, elle utilise une image PNG transparente à la place du CSS couramment utilisé pour l'arrière-plan transparent. Vous pouvez également essayer ColorBox de Jack Moore, qui fonctionne également dans IE 6 à 9.

Opacité du fond dans les Lightbox et IE

Les versions 8 et antérieures d'Internet Explorer ne sont pas conformes aux normes CSS en vigueur, à la date de publication. Le manque de conformité crée un problème pour les lightbox, en particulier les arrière-plans, parce que CSS crée une opacité qui s'affiche dans tous les autres navigateurs Web modernes. Avant CSS3, les concepteurs Web fabriquaient un élément semi-transparent à l'aide de la balise d'attribut "opacity" ou de la classe de la feuille de style, comme suit:

.background {background: # 000000; hauteur: 100% largeur: 100%; opacité: 0, 5;}

Ce qui précède crée un fond noir transparent à 50% et remplit la page.

Modification de l'opacité pour travailler avec IE

Heureusement, tout n'est pas perdu pour définir la transparence de l'élément d'arrière-plan de votre visionneuse dans Internet Explorer. Bien que l'attribut "opacité" ne fonctionne pas, le filtre "" fonctionne. Dans tout élément qui utilise "opacity", ajoutez l'attribut filter pour rendre cet élément semi-transparent dans Internet Explorer, comme suit:

.background {background: # 000000; hauteur: 100% largeur: 100%; opacité: 0, 5; filtre: alpha (opacité = 50);}

Ce correctif fonctionne avec Internet Explorer 6 et les versions ultérieures et ne provoque aucun problème d'affichage dans les autres navigateurs.

CSS3

Au fur et à mesure que CSS3 devient plus largement supporté, de plus en plus de boîtiers lumineux tirent parti de ses fonctionnalités de conception avancées. CSS3 vous permet de définir une couleur unique dans un élément comme transparente en définissant la couleur dans les valeurs RVB et en ajoutant un paramètre "alpha", dans lequel l'opacité est définie entre 0 et 1. Par exemple, un arrière-plan bleu à 50% d'aspect transparent comme ça:

arrière-plan: rgba (0, 0255, 0, 5);

Internet Explorer 8 et les versions antérieures ne prennent pas en charge cette fonction. Ainsi, l’arrière-plan de la lightbox utilisant cette fonction s’affiche de manière totalement transparente.