En tant que développeur Web, vous avez sûrement eu à faire à ce souci d'affichage sous Internet Explorer qui fait que certains éléments de la page chevauchent un div alors que ce dernier devrait logiquement s'afficher par dessus. La première idée qui passe par la tête pour résoudre ce problème est de jouer avec la propriété CSS z-index qui permet de régler le niveau de profondeur à l'affichage d'un tag HTML. Or le problème persiste malgré tous les efforts que vous avez pu déployer, rien n'y fait, ces satanés éléments s'affichent malgré tout par-dessus le calque !
D'aucun considère ce comportement comme un bug d'IE... Mais "it's not a bug, it's a feature" :p En effet, le navigateur made by Microsoft gère certains éléments différement des autres. Ces éléments particuliers sont les champs de formulaire de type select simples ou multiples, les checkboxes, les iframes, les objets flash, ActiveX, et autres plugins en tout genre (Quicktime, Windows Media Player, ...). Dans la terminologie Microsoft, ces éléments sont appelés Windowed Controls, par opposition aux Windowless Controls. En effet, ces contrôles sont affichés dans leur propre fenêtre (d'où Windowed). Ce comportement "illogique" est présent dans la version 6 SP2 d'IE et toutes les versions antérieures, mais a été revu dans la dernière mouture du navigateur, la version 7.
Plusieurs workarounds existent pour détourner cette "feature". L'un est de masquer tous les windowed controls à l'affichage des div incriminés. Cependant, ce comportement n'est pas très propre et peut s'avérer choquant pour les utilisateurs. Une 2nde solution est de créer une iframe sous le div. En effet, l'iframe est le contrôle ayant la plus forte priorité sur les autres windowed controls, elle s'affichera donc par-dessus ces derniers. Vous allez me rétorquer que l'iframe est soi-même un windowed control et va donc s'afficher également par-dessus la calque. Oui, mais on peut appliquer à une iframe l'attribut CSS z-index pour gérer son empilement sur la page ! Il est donc possible d'afficher le cadre au-dessus des windowed controls mais en-dessous de notre div.
Cette dernière solution est, à mon avis, la plus appropriée. Cependant elle présente un inconvénient important. Dans le cadre d'un div s'affichant toujours au même endroit (un menu par exemple), il est facile de déterminer la position et les dimensions de l'iframe. Mais si le calque peut s'afficher à n'importe quelle position dans la page (contenu de page généré dynamiquement selon certains critères par exemple), il est difficile de savoir où placer le cadre !
Rassurez-vous, si vous êtes dans le 2nd cas, une librairie Javascript a été développée pour automatiser ce processus de création d'iframe. Très simple d'utilisation, elle permet de masquer / réafficher tous les windowed controls par le biais de 2 instructions. Elle s'appelle WCH et elle se télécharge ici. Plusieurs démos sont présentes sur le site pour illustrer le fonctionnement de ce script magique ;)
A noter qu'elle permet de contourner le comportement d'Internet Explorer, elle est donc inutile pour les navigateurs alternatifs, qui gèrent eux les windowed controls de façon plus "normale". Il est donc pertinent de ne l'inclure que si on détecte que le client de navigation est le butineur de Microsoft.
