Prélude

Vous allez commencer par me dire : « mais qui utilise encore IE6 ? Même Microsoft milite pour son éradication ! » Et bien le fait est que quand les entreprises s’équipent en navigateurs, c’est pour le (très) long terme.

IE6 était bien pour une seule chose, il allait contre une règle de boxing du W3C qui fait hièch en ce moment. Elle faisait que lorsqu’on définissait 100% de largeur, borders et margins étaient compris dedans. A part ça, c’est un dinosaure dont on aimerait se débarrasser.

The bug

IE 6 possède un bug « rigolo » :

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly.

Pour ma part, j’ai eu à traiter ce problème sur les thèmes d’un portail Intranet. Les thèmes ont été ajaxisés et, s’ils conservent leur apparence, les imbrications provoquent le splendide bug de z-index : des menus déroulants passent derrière des objets sans z-index et positionnés en aval dans le flow du code. Comme je ne souhaitais pas repasser sur tous les thèmes tout de suite, j’ai fait un petit script qui fait ce ceci :

1. Il ne traite que les navigateurs IE6, IE7 et IE8 en mode compatibilité (IE7, quoi). IE5 est tout de même considéré comme mort.
2. Il récupère les positions absolues des éléments incriminés à coup de jQuery offset.
3. Il décroche les éléments de leur position dans le DOM.
4. Il les réinsère à un niveau élevé (genre le body) et les installe confortablement en position absolue.

Ainsi, les éléments sont situés en dehors du méga-bordel généré par le portail et il n’est pas nécessaire de trifouiller la génération des pages (ouf).

Evidemment, cette approche a ses limites car l’offset n’est pas toujours très très précis. Il existe d’autres workarounds pour des solutions moins extrêmes quand vous avez la maîtrise totale du code HTML. Je vous invite à y jeter un oeil car la mienne est un dernier recours.

Voilà, j’espère que cette alternative pourra tirer quelques âmes perdues d’un petrin immédiat. Mais ce n’est pas une solution à long terme (donc en fait si).