Yann Faurie

La meilleure stratégie à adopter avec IE6 est de ne pas en assurer le support.

Stop. Très bien, je sens votre frustration. Vous êtes développeur web et prêt à vous arracher les cheveux parce que vous AVEZ à supporter IE6, mais pour dire les choses avec diplomatie, IE6 ne vous supporte pas. Vous avez passé des heures sur votre mise en page, mais vous ne pouvez toujours pas obtenir un rendu correct. Je peux comprendre. Je peux aussi vous aider.

Ceci n'est pas un de ces assaut à propos d'IE6 ou une campagne pour essayer de l'enterrer. Il y a assez de cela sur le web, et cela ne vous aide pas si vous devez supporter IE6 pour la simple raison qu'il a encore assez de parts de marché que vous ne pouvez ignorer pour des raisons professionnelles. Non, ce ne sont pas les ressources que vous aviez espérées.

J'ai parcouru le web pour trouver des ressources, j'ai également inclus mes correctifs pour IE6 et j'ai maintenant tout réuni dans cet article de référence afin de venir en aide à celui qui doit tenir compte d'Internet Explorer 6. Quand cela m'a été possible, j'ai fait de mon mieux pour proposer des solutions valides et propres à chaque bug, plutôt que des bidouilles. J'ai également tenté de donner les crédits appropriés pour chaque cas, mais certaines solutions ont été partagées tellement de fois que trouver la découverte originale de chaque correction est difficile. Si vous rencontrez un crédit manquant ou si j'ai oublié un bogue et sa solution, merci de contacter l'auteur qui mettra son article à jour.

Ce volumineux guide pour IE6 a prit un certain temps à être rédiger, et je vous invite à le bookmarker, partager, tweeter et utiliser afin de vous épargner du temps.

Stratégies

Avant de regarder les bogues spécifiques à IE6 et leurs correctifs, il est important de mettre en place en premier certaines stratégies qui vous aideront à minimiser le nombre de problèmes à répétition. Un peu de prévention est bien plus efficace/rentable que d'avoir à gérer une multitude de bugs qui auraient pu être évités en suivant ces bonnes pratiques.

Parts de marché d'IE 6

Selon Market Share, le pourcentage actuel (Aout 2009) d'utilisateurs d'IE6 est de 25,25%, mais d'autres sources indiquent un pourcentage bien inférieur à 18,1%. Bien que les statistiques varient, elles indiquent toutes une courbe / tendance descendante. Toutefois, les seules statistiques qui comptent vraiment sont celles de votre propre site. Si vous utilisez déjà des outils d'analyse de traffic , le pourcentage d'utilisation d'IE6 justifie-t-il le développement pour lui ? En termes d'affaire, quel est le cout / ratio bénéfique pour le temps et l'argent investis à développer pour IE6, contre le fait de l'abandonner carrément ? Pouvez-vous faire un cas de marché pour supporter le mourant IE6 ? Si la majorité de vos visiteurs n'utilisent pas IE6 et que cela ne risque pas de vous amputer du chiffre d'affaire, vous pouvez vous épargner beaucoup de temps, d'effort et d'argent en évitant carrément le problème IE6.

Planifiez votre design et gardez-le simple

Si vous planifiez votre design , ne serait-ce qu'en prenant quelques minutes pour étudier la meilleure approche de développement, vous pouvez mettre de côté certains problèmes de mise en page potentiels. Même les plus complexes designs visuels peuvent et doivent être créés à l'aide de solutions de balisage simples. Si vous trouvez que vous utilisez un nombre de balises excessif, c'est peut-être le signe que vous devriez ré-évaluer votre approche.

Avec l'expérience et en surmontant plusieurs cas de mise en page, gardez trace de vos résultats et des problèmes résolus. Je peux quasiment vous garantir que vous rencontrer à nouveau le même problème, et le fait d'avoir ce document de référence vous fera économiser du temps.

Utilisez un Doctype correct

Le fait de ne pas utiliser le bon doctype (ou ne pas utiliser de doctype tout court) va déclencher le mode "quirks" et va empêcher votre page d'avoir un rendu consistent selon les navigateurs. Utilisez un des doctypes suivants : HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional, or XHTML 1.1



HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">    

HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

Validez votre code

J'ai entendu quelques personnes dire qu'il n'y avait aucune raison commerciale de valider le code, mais je n'adhère pas.
La validation n'est pas difficile à ce point dans la plupart des cas, et devrait prendre seulement quelques minutes à réaliser. Quelques minutes passées à valider le XHML et CSS peuvent soulever des bénéfices pour TOUS les navigateurs, pas seulement pour IE6. La validation assure une compatibilité future et réduit la maintenance. Au minimum, validez le balisage XHTML. La seule vraie raison pour laquelle cela pourrait être ignoré est si vous souhaitez donner l'avantage de quelques propriétés CSS3 aux navigateurs qui les supportent.

Développez en premier pour les navigateurs respectueux des standards

En conjonction avec la validation de code, vous vous épargnerez beaucoup de tracas en développant prioritairement pour les navigateurs respectueux des standards comme Firefox, Opera, Safari et Chrome en premier, puis en opérant pour des navigateurs non conformes comme IE6 et IE7. Parce que les premiers vont avoir sensiblement le même rendu, vous aurez alors la capacité de traiter les particularités d'Internet Explorer séparément. Utiliser le workflow peut également aider dans la garantie d'un code évolutif parce qu'il vous donne une base solide et que si vous identifiez correctement vos correctifs, vous pourrez les oter sans soucis une fois que le support pour ces navigateurs ne sera plus assuré.

Utilisez les améliorations progressives

L'amélioration progressive signifie simplement de s'assurer que la fonctionnalité de base est disponible pour tous les utilisateurs avant d'ajouter le lustrant. EN général, l'amélioration progressive fait référence à des applications web qui fonctionnent sans javascript, puis qui utilisent javascript pour ajouter des animations effets Ajax, etc, mais, en parlant d'IE6, on pourrait également appliquer le principe des améliorations progressives à l'utilisation des CSS3 (oû même plusieurs parties de CSS2), HTML5, et d'autres protocoles non supportés par IE6.

Dans certains cas, il se peut que cela ne soit pas possible de procurer la même expérience à tous les utilisateurs de tous les navigateurs, spécifiquement ceux utilisant IE6. Mettre en place la stratégie d'amélioration progressive assurera que ces utilisateurs auront au moins le minimum de fonctionnalité en parcourant votre site ou votre application web.

Utilisez une règle de mise à zéro CSS

Chaque navigateur est livré avec sa propre feuilles de style par défaut, et cela ne surprendra personne, chacune est différente. Une simple remise à zéro au début de votre feuille de style peut s'avérer gagnante dans l'écriture de code compatible inter-navigateurs. Il y a de nombreuses règles de remise à zéro sur internet, allant de la plus simple à la plus détaillée.

Utilisez un framework javascript

Si  JavaScript représente plus qu'une part anecdotique de votre site, considérez l'utilisation d'un framework. La plupart ont été testé dans de multiples navigateurs incluant IE6 et prendront automatiquement en main la plupart (mais pas tous) des cas inter-navigateurs. Il y a plusieurs framework javascript parmi lesquels choisir. En général, ce qui peut être fait avec l'un peut l'être avec l'autre, aussi choisissez avec lequel vous êtes les plus à l'aise au niveau de la syntaxe.

Voici une liste de quelques frameworks parmi les plus populaires :


Il y a certainement beaucoup d'autres frameworks et de nouveaux continuent de sortir, mais les lister tous sera pour un autre jour. Parmi ceux cités, j'adore, utilise et recommande pleinement MooTools si vous maîtrisez JavaScript. Si vous venez juste de débuter, jQuery serait probablement ma seconde recommandation.

Utilisez un script de correction Javascript pour IE

Il y a quelques solutions javascript proposées sur Internet qui tentent de forcer IE à agir comme un navigateur respectueux des standards. Si l'audience ciblée comporte un seuil suffisamment élevé d'utilisateurs disposant de Javascript, vous pourriez essayer IE7 de Dean Packer's ou un script similaire.

Comment déboguer Internet Explorer

Internet Explorer est de notoriété publique difficile à déboguer, mais il existe de nombreux outils pour rendre la tâche aux développeurs plus facile. Comme déjà dit, premièrement développez pour les navigateurs respectant les normes. Firebug et la Web Developper toolbar sont tous deux d'excellent greffons pour Firefox et peuvent aider à trouver ou éradiquer de nombreux bugs dans IE. Si vous souhaitez la puissance de Firebug dans d'autres environnements, Firebug Lite est maintenant également disponible en tant que bookmarklet.

Pour tester de multiples versions d'Internet Explorer, la meilleure option sans installer une machine virtuelle est actuellement IEtester. Les créateurs d'IETester proposent également DebugBar, un plugin pour IE gratuit pour un usage personnel mais demandant une licence commerciale après 60 jours d'utilisation à des fins commerciales.

Comment isoler IE6

La première étape pour gérer IE6 est de l'isoler de façon à ce que tous les changements ne l'affectent que lui et aucun des autres navigateurs. Il existe plusieurs façons de poinconner IE6 : à l'aide de commentaires conditionnels, à l'aide de selecteurs CSS, et à l'aide de JavaScript. Nous allons aborder chacune de ces méthodes tour à tour.

Utiliser les commentaires conditionnels pour Internet Explorer.

Microsoft a inclus les commentaires conditionnels comme un moyen de cibler les différentes version sd'Internet Explorer. Tout peut-être placé dans les commentaires conditionnels, incluant le balisage, JavaScript, les fichiers Javacsript, les CSS et fichiers externes. Les commentaires conditionnels fonctionnent de façon telle que vous pouvez cibler une version spécifique d'IE, et chaque version antérieure ou postérieure à une version particulière.

La syntaxe est la suivante :

Utiliser les commentaires conditionnels comporte de nombreux avantages sur les autres méthodes. La feuille de style est séparée des autres CSS de la sorte qu'il n'y a aucune confusion sur les navigateurs impactés. Egalement, quand IE6 chutera a un niveau suffisant de part de marché, la feuille de style peut être rapidement retirée dans avoir à parcourir chaque déclaration CSS.

Le seul inconvénient à utiliser les commentaires conditionnels réside dans le fait qu'ils ajoutent une requête HTTP à la page pour ce navigateur. Bien que cela soit un moindre mal pour une CSS, je conseillerai d'éviter les javascript conditionnels externes parce qu'ils agissent comme des freins et peuvent empêcher d'autres fichiers à se charger jusqu'à ce que le chargement soit complètement terminé. Si vous avez besoin de javascript conditionnels externes, utilisez plutôt JavaScript lui-même pour cibler le navigateur.

Comment cibler IE6 à l'aide de sélecteurs CSS

Si vous ne souhaitez pas utiliser de commentaires conditionnels, les sélecteurs CSS sont une autre option pour cibler IE6. Internet Explorer 6 ne supporte/comprend/interprète pas les sélecteurs enfants. Vous pouvez donc créer une déclaration CSS pour IE6 puis utilisez les sélecteurs enfants pour des déclarations destinées à IE7 et tous les navigateurs modernes.

En premier, le HTML


Puis les CSS

L'inconvénient de cette méthode est que cela peut rendre votre feuille de style un peu cahotique, assurez-vous alors de commenter clairement votre code. La déclaration CSS pour IE6 sera également détectée et interprétée par les autres navigateurs, aussi est-ce important de la placer avant la déclaration du sélecteur enfant. La raison pour laquelle l'enfant surcharge la première déclaration et parce qu'il confère un coefficient de spécificité supérieur à la déclaration. Parce qu'IE6 ne reconnaît pas la syntaxe, il l'ignore, mais tous les autres navigateurs l'interprètent comme ils le devraient.

Comment utiliser JavaSCript pour détecter IE6

Si vous souhaitez détecter IE6 via JavaSCript sans vouloir utiliser des commentaires conditionnels, voici comment :

Images

IE6 comporte de nombreux points noirs qui peuvent s'avérer bloquant à propos des images si vous avez un agenda serré ou êtes liés à une mise en page particulière. Cette section est destinée à vous alléger de certaines de ces contraintes.

Le correctif de transparence Alpha PNG pour IE6

Un des aspects les plus frustrants d'Internet Explorer 6 est qu'il ne supporte pas la transparence pour les images en haute qualité, rendant les effets de superpositions de calques difficiles. Il existe quelques solutions Javascript, que je liste dessous, mais aucune ne vous permet d'utiliser la techniques des sprites CSS.

La solution la plus simple consiste à enregistrer votre image en tant que fichier PNG8 avec transparence alpha. Si vous utilisez Adobe Fireworks, voici comment faire : Enregistrer Sous > Enregistrer comme type > PNG aplati > Options > Transparence Alpha. Si vous utilisez un  type de dégradé, vous pouvez cocher la case "Dither" afin d'obtenir une qualité de dégradé légèrement meilleure. Sauvegarder en tant que PNG avec transparence Alpha n'affichera comme semi-transparentes que les zones d'images transparentes à 100%, il n'y a pas de variantes de degrés d'opacité.

Coins arrondis dans IE6

Plutôt que de me lancer dans une explication détaillée ici, je vous renvoie simplement vers un tutoriel sur les menus CSS à coins arrondis, qui couvre une méthode inter-navigateur pour créer des coins arrondis pour des menus ou d'autres éléments de mise en page.

Comment résoudre l'image de fond qui vacille

Si vous utilisez des sprites CSS en pour des images de fond appliquées à des boutons ou des liens, vous remarquerez que l'image se mettra à vaciller brièvement dans IE6. La raison en est qu'IE6 ne met pas en cache l'image correctement et la recharge à chaque fois. Vous pouvez corriger cela en utilisant une seule ligne de JavaSCript qui force IE6 à cacher l'image.

D'autres solutions


Mise en page

Les bogues de mise en page d'IE6 peuvent être les pires à contourner, surtout lorsque vous travaillez sur un positionnement au pixel près qui s'affiche comme souhaité dans tous les navigateurs sauf IE6.
Cette section concerne ces bogues et leurs correctifs.

Comprendre hasLayout

Un certain nombre de bogues d'IE6 et d'erreurs de rendu peuvent être attribués au concept propriétaire hasLayout de Mircosoft. En quelques mots, hasLayout est déclenché lorsqu'un élément a des dimensions comme la hauteur ou la largeur. L'absence de ces déclarations peuvent se solder par un des nombreux bogues que vos rencontrerez sûrement en travaillant pour IE6.

Plutôt que de m'embarquer dans une longue description de hasLayout, je vous renvoie plutôt à un excellent tutoriel sur le sujet par John Gallant and Holly Bergevin, qui détaillera quand et comment gérer hasLayout.

En savoir plus

Le modèle de boîte d'IE6

Si le mode quirks "excentrique" est déclenché dans IE6, ce dernier va utiliser une ancienne interprétation du modèle de boîte de Microsoft qui exclue les bordures et les marges internes de la largeur totale d'un élément. La meilleure stratégie pour gérer ce bogue est d'éviter de déclencher ce mode en spécifiant un doctype correct ou en n'appliquant pas de propriété "largeur" à un élément qui comporte déjà des propriétés border ou padding. Les commentaires conditionnels peuvent également être utilisés, mais ne devraient être appelés qu'en dernier recours.

En savoir plus

Hauteur Minimum - Min Height

IE6 ne connaît pas le propriété min-height et traite la hauteur en tant qu'hauteur minimum à la place. Grâce à Dustin Diaz, un correctif a été découvert qui utilise la déclaration !important, qu'IE6 surchargera mais pas les autres navigateurs. Cette solution fonctionne également avec min-width.

Max height

Malheureusement, les seuls façons de réussir l'effet de "hauteur maximum" dans IE6 est rendu possible par les déclarations des CSS spécifiques à IE, ce qui revient à exécuter du Javascript dans une feuille de script, ou en utilisant directement Javascript. Des deux, je recommande d'utiliser la solution de Javascript vu que les expressions CSS sont coûteuses en terme de puissance de calcul et peuvent entraîner un plantage du navigateur. Aucune des deux solutions ne fonctionnera si Javascript est désactivé. Notez que cette solution n'est valable que pour IE6 vu que tous les autres navigateurs accepte max-height.

100% Hauteur

Dans le but qu'un élément atteigne 100% de sa hauteur dans IE, vous aurez besoin de spécifier à l'élément parent une hauteur fixe. Si vous voulez que l'élément respecte la longueur totale de votre page, appliquez hauteur : 100%; aussi bien à html qu'au corps de l'élément.

Min width / Largeur miminum

Tout comme max-height et max-width, min-width n'est pas toléré par IE6. Il y a deux solutions, appliquer un balisage "extra" pour réussir l'effet, ou utiliser Javascript.

Max width / Largeur maximum

La seule façon d'utiliser max-width dans IE6 est de se servir de Javascript.

 
Le bogue de la double marge flottante

IE6 double de façon incorrecte la marge pour les éléments flottants avec une marge appliquée au même côté que l'élément flottant. Steve Clason est l'auteur du correctif, qui est de simplement ajouter display:inline; à l'élément flottant.

Comment se débarrasser des flottements

Si vous tentez d'emballer des éléments flottants au sein d'un conteneur, mais que celui-ci ne les contient pas correctement, définissez-lui soit une hauteur soit une largeur avec une valeur autre que auto, puis ajouter la propriété overflow avec l'une des valeurs suivantes : auto, hidden ou scroll.

Alex Walker a été le premier a écrire sur cette technique et crédite Paul O'Brien pour l'idée.

Les chûtes de flottement

Ce bogue survient lorsque les contenus d'un bloc flottant dépassent sa largeur définie. Dans Firefox, IE7 et les autres navigateurs, les contenus seront seulement coupés, mais dans IE6, le conteneur ne tiendra pas compte de ses dimensions spécifiées et s'élargit afin de s'adapter aux contenus.SI d'autres éléments ont été positionnés en flottant juste à côté, ils passeront dessous.

Ce bogue est l'un des bogue d'IE6 pour lequel je n'ai pas vraiment trouvé de solution satisfaisante. Il peut être minimisé en utilisant overflow:hidden; ou overflow:scroll; mais la valeur hidden présente des soucis d'accessibilité et la valeur scroll peut défigurer la mise en page. Même les correctifs Javascript ne semblent pas utiles. La meilleure solution que je puisse proposer est d'éviter ce cas de figure, soit en utilisant une mise en page fixe, soit en étant très pointilleux sur la taille de votre contenu.


Le bogue de la Guillotine

C'est un bug particulièrement frustrant d'IE6 et d'IE7. Il tronque ou guillotine le contenu d'un élément flottant non dégagé qui serait plus large que son élément conteneur quand les liens ont des styles de survol avec des éléments non-flottants après le passage de la souris. Pas de soucis si cela ne vous paraît pas clair, ce bug et son correctif sont encore une fois bien documentés par les gens de Position Is Eveything.

En dépit des conditions complexes à réunir pour déclencher le bogue, les solutions sont plutôt simples. La première requiert d'ajouter un élément additionnel en bas du conteneur et lui attribuer un clear:both;
La seconde solution est de déclencher hasLayout sur l'élément contenant les liens qui provoquent l'effet guillotine. Ceci peut-être réalisé en ajoutant simplement une déclaration de height:1%;


Le bogue de l'écart de 3px

Egalement appelé le bogue du texte poussé de 3px, il survient dans IE6 lorsque du texte est adjacent accolé à un élément flottant. IE6 ajoutera une margin de 3px entre l'élément et le texte, même si aucun n'est spécifié.  Stu Nichols a une solution élégante au problème.


IE et la propriété Z-index

Si vous utilisez la propriété z-index sur des éléments positionnés dans IE6 ou 7, l'index d'empilement se réinitialisera à zéro, provoquant une erreur de rendu. La solution, évoquée par une personne nommée baker, est d'ajouter un z-index plus haut que l'élément parent. Dans certains cas, l'élément parent peut également avoir besoin de se voir attribuer un position:relative;

Bogue du débordement

Jonathan Snook documente et résout le bug de l'overflow, qui survient lorsque la propriété overflow est attribuée sur un élément conteneur dans lequel un élément enfant à la hauteur supérieure est positionné en relatif. Dans IE6 et IE7, au lieu de suivre la déclaration overflow, l'enfant plus grand se répandra hors de son parent. La solution ? Ajouter position:relative; au conteneur.

Les listes

Sans surprise, il y a un certain nombre de bogues spécifiques à IE6 concernant les listes. En voici quelques uns et leurs correctifs.

Le bogue de l'escalier

Apparaît lorsque les contenus d'un élément <li> sont flottants dans une tentative de créer une liste horizontale (souvent dans le cadre de la navigation). Chaque élément apparaîtra soit empilé verticalement, soit flottant en suivant un dessin d'escalier.

La solution ? Appliquez le flottement à l'élément <li>, ou appliquez lui display:inline;

Espacement vertical ou bogue de l'espace blanc

En créant une liste verticale qui contient des balises <li> avec des enfants en niveaux de bloc, IE6 (et parfois IE7) ajoutera de façon erronée un espace vertical entre chaque élément de liste. Il existe de nombreuses solutions, mais regardons rapidement un exemple auparavant :

Jon Hicks a le mérite d'un correctif qui implique du flottement et du clearing sur les liens d'une liste :

Une autre option est de déclencher hasLayout en spécifiant soit une hauteur soit une largeur spécifiques sur les liens ou tout élément de niveau bloc.

On peut également attribuer une déclaration  display:inline à la balise <li>

Un autre correctif intéressant implique de laisser un espace entre le dernier caractère textuel dans le bloc de niveau, et la balise fermante.

Comportement

Comme dans beaucoup d'autres scenarii, IE6 a des problèmes dans sa façon de se comporter. Certaines de ses lacunes proviennent de l'âge d'IE6, parce qu'il ne supporte que partiellement CSS2; parc qu'il ne supporte pas du tout CSS3, ou encore parce que Microsoft a simplement décidé de suivre un standard propriétaire.

Regardons quelques-uns des problèmes de comportements les plus communs d'IE6

Pas d'état au survol dans IE6

Il n'y a aucun support pour un état au survol d'un élément, exception faite des balises d'ancres avec l'attribut href, ou d'éléments pour lesquels une telle balise ancre agit comme un conteneur. Cela restreint sérieusement les effets de survol au passage de la souris dans IE6, mais il existe des moyens de contourner cela.

La meilleure façon est de ne pas s'appuyer sur la propriété hover pour des missions de fonctionnalités critiques. A la place, utilisez-la seulement pour accentuer ou améliorer une option déjà fonctionnel et accessible.

La plupart des correctifs utilisent soit la propriété propriétaire de Microsoft ou une solution javascript souvent au travers d'un framework ou d'un script correctif.

Incorporer le modèle de balise dans IE

Aucune version d'explorer (incluant IE7 et IE8) ne supporte le modèle de HTML5 car Microsoft préfère à la place proposer sa propre option, VML. Toutefois voici plusieurs solutions JavaSCript qui émulent le tableau de balises pour IE.

Bogue de redimensionnement

Emilie Stenström a découvert et trouvé un correctif pour ce bogue. Dans un document à la mise en page fixe et à l'élément body centré, tout élément positionné relativement à l'intérieur deviendra fixe si la page est re-dimensionnée sans être rechargée. La solution d'Emilie fût simple et élégante : ajouter position:relative; à la balise body.

Javascript

IE6 souffre également d'une pléthore d'erreurs lorsqu'il tente d'interpréter javascript. Je ne vais pas être capable de tous les couvrir, mais je vais aborder quelques unes des situations les plus communes et ce que pouvez réaliser pour les corriger.

Erreur : identifiant attendu, chaîne, ou nombre

IE n'est pas réputé pour être tolérant vis-à-vis de javascript mal codé et donnera souvent l'erreur "identifiant attendu, chaîne, ou nombre" si une virgule qui traîne est trouvé après le dernier élément d'un ensemble. Les autres navigateurs sont plus indulgents , mais en retirant la virgule, vous pouvez habituellement vous débarrasser de l'erreur.

Fuite de mémoire javascript

Parce qu'il utilise son propre gestionnaire de mémoire, il eut être sujet à une fuite de mémoire lorsqu'il ne parvient pas à faire appel à de la mémoire pour intéragir avec javascript.  Douglas Crockford a une compte-rendu excellent sur la prévention des failles de mémoire dans IE. Une autre page sur le sujet, écrite par Hedger Wang, vaut également le détour.

Divers

Cette section est dédiée aux quelques bogues et correctifs qui ne rentrent pas clairement dans les autres catégories.

Bogue de copie de caractères

Lorsqu'IE6 rencontre quelque sorte d'élément caché, comme un commentaire ou un élément mis en display:none; à l'intérieur d'un élément flottant, il arrive qu'il duplique les caractères. Le problème est joliment détaillé dans Position Is Everything, mais la solution semble assez simple : appliquer un display:inline; sur le flottant qui précède les éléments cachés.

Favicons dans IE

C'est le raccourci pour Favorite Icon et fait référence à l'image de 16 par 16 pixel qui apparaît à côté de la page que vous mettez dans vos favoris. Il y a deux méthodes pour le faire apparaître. La première est simplement d'enregistrer une image nommée favicon.ico dans le répertoire racine de votre site web. IE et les autres navigateurs devraient automatiquement  chercher l'image et l'afficher. La seconde méthode est de placer le code suivant dans l'entête de votre document HTML (après avoir chargé votre image).

Notez que cette image favicon peut être mise en cache, et ne changera pas jusqu'à ce que vous vidiez votre cache navigateur une voire plusieurs fois.
Si vous souhaitez une mise à jour automatique pour vos visiteurs, définissez l'expiration dans l'entête de l'image.

GZip dans IE6

Certaines versions d'IE6 antérieures à la mise à jour XP SP2 peuvent avoir des problèmes avec les fichiers qui ont été servis via la compression Gzip.
Heureusement,  Seb Duggan a trouvé une solution à ce bug en utilisant le répertoire d'installation ISAPI_REWRITE du serveur Apache.

Sa solution consiste à placer le code suivant dans le fichier httpd.conf à l'intérieur de ce répertoire.