2 Associés est une agence web de Montréal spécialisée en développement web et mobile, stratégie de contenu SEO, SEM et les technologies langagières.

Vous voulez discuter?

Bogue de rendu d’éléments vides avec un z-index sous IE

2 Associés développement web et mobile à Montréal

Internet Explorer, versions 7 et 8, comportent un bogue de rendu d’éléments vides utilisant le positionnement avec un z-index.

Il arrive certaines situations où une zone complète doit être cliquable, comme dans le cas d’une bannière publicitaire. Lorsque celle-ci est en HTML (autre que 5), l’élément hyperlien «a» ne pourra contenir d’éléments dit «block» : Titres «h1» ou des paragraphes «p» par exemple. L’hyperlien sera donc traité comme une action à la fin de la bannière et rendu par «CSS» en une zone cliquable aux dimensions de la bannière.

Problème :

Cette note technique fournit une méthode pour confirmer l’existence d’un problème de rendu de zone cliquable sous Internet Explorer («IE») 7 et 8, avec un élément vide positionné en absolu et comportant une valeur de z-index supérieure à celle de son parent ainsi que les étapes pour corriger ce problème sans altérer le code source (Document Object Model ou «DOM».

Symptôme :

Considérer le code HTML suivant :

http://jsbin.com/odomux/5/

L’objectif est de rendre toute la bannière cliquable avec l’hyperlien au bas de celle-ci. Le «markup» actuel est valide et sémantique. Pour arriver à rendre toute la bannière cliquable, on modifie le «CSS» pour obtenir le code suivant :

http://jsbin.com/odomux/6/

Si nous ouvrons le lien précédent avec n’importe lequel des navigateurs, à l’exception de «IE», toute la zone est cliquable. Si nous ouvrons le lien avec «IE» version 7 par exemple, seules les zones vides, c’est-à-dire sans image ou texte, sont cliquables. Sous «IE», les images ou les textes semblent au-dessus de la zone cliquable.

Cause :

Il semble que «IE» privilégie les éléments avec contenu et les places par-dessus les éléments vides et ce, même avec l’ajout de positions et de valeur en z-index. Sous «IE», il est donc impossible de placer un éléments vide sur toute la largeur et la longueur d’un élément avec contenu, sauf si celui-ci comporte une couleur ou une image d’arrière-plan grâce à l’attribut «CSS» «background».

Solution :

Mettre un élément, exemple une image transparente dans l’attribut «CSS» «background» de l’élément positionné en absolu, dans ce cas-ci, l’élément «a» :

http://jsbin.com/odomux/7/

Toute la zone est désormait cliquable et le «DOM» est intacte. Personnellement je mettrais la déclaration uniquement dans un fichier «CSS» spécifique pour «IE».

Commentez cet article

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles reliés