Vous le savez tous, Internet Explorer 6 est un cauchemar pour tous les développeurs.

Microsoft, en tant que membre de W3C, a participé à l'élaboration des spécifications techniques de CSS (Cascading Style Sheets = feuilles de style). Ce qui n'empêche pas Internet Explorer pour Windows de faire absolument ce qu'il veut de vos CSS. Le problème ? 80% des foyers français et des entreprises utilisent une version 6 ou 7 d'Internet Explorer... (firefox, chrome, ie7, safari, opera sont utilisés en minorité, malheureusement).

Ce sont essentiellement les fonction "Margin" et "float" qui sont touchées. Mais pas seulement !

Petit tour d'horizon des différentes fonctions CSS peu compatible avec Internet Explorer 6 entre autres.

La box / div

Votre site est composé (si il est bien conçu) de "balises div" qui contiennent les élements de votre site.

Ces div ou encore "box", sont mises en forme / en page par la CSS.

• non géré par IE 5 pour Windows.
• géré par IE 6 en mode Strict (voir le "Doctype"), avec des incompatibilités telles que le calcul de dimensions.

Explication en images :

La largeur (width) d'un box l'écran, est considéré de la façon suivante par la CSS :

margin-left  + border-left  + padding-left  + width  + padding-right  + border-right  + margin-right.

Tous les navigateurs l'accèptent. Sauf notre ami IE6, qui considère que la largeur de votre box contient  le contenu (texte ou image ou les deux), les paddings et les borders.

Au final, on obtient des résultats surprenants entre IE6, IE7 et Firefox, qui n'affichent pas du tout la même chose en termes d'aspect graphique !... mais des solutions existent (voir les liens en bas de page).

Le positionnement fixe d'images d'arrière-plan

• IE5 et 6 pour Windows ne savent pas gérer la fonction "background-attachment:fixed", à l'exception de la balise "body".

Il vous est donc impossible de fixer une image d'arrière plan dans une balise autre que la première de votre site ("body").

Marges auto

Centrer un élément (pas son contenu) à l'écran.

• IE pour Windows ne connait pas "margin:auto".

IE6 pour Windows ne connait que le "text-align:center".

Tous les navigateurs interprètent pourtant correctement.

Mais avec une petite astuce CSS, on contourne le problème aisément.

Conclusion

Merci Microsoft ! Rien de grave cela dit, tous ses concurrents font mieux depuis longtemps.
Mais tout de même, peut-on se permettre de bouder IE alors qu'il est le plus répandu des navigateurs sur le marché ? Certainement pas. (J'en ai fais les frais il y a peu). Presque touts ces soucis ont une solutions que l'on nomme "hack CSS".  Et heureusement, car la liste de bugs est longue.

Liens utiles

De quoi solutionner vos soucis de CSS avec IE 5/6/7 :

• http://homepage.ntlworld.com/bobosola/pngtest.htm  gestion des transparence des png dans IE5 et 6.
• http://www.westciv.com/style_master/academy/browser_support/selectors.html listing de compatibilité CSS.
• http://www.siteduzero.com/ de quoi parfaire vos connaissances sur le html / whtml / css / php / etc.
• http://validator.w3.org/ pour vérifier que votre site est bien multi-navigateurs.