A propos du Modèle de boîte Microsoft (ou "quirks")

Internet Explorer interprète les dimensions CSS différemment des autres navigateurs, ou plutôt interprétait... Contrairement à ce que laissent supposer certains articles et propos de designers "chevronnés" qui n'en démordent pas, Internet Explorer 6 de Microsoft interprète les dimensions CSS des pages html et xhml valides de la même manière que les autres navigateurs de même génération.

Alors pourquoi cette confusion ?

Préambule

Si le terme de "Modèle de boîte" vous est totalement étranger, allez lire cet article illustré très complet.

Le fameux mode Quirks

Avec les versions 5.0 et 5.5 d'Internet Explorer lorsque vous avez, par exemple, une "boîte" large de 200 px (zone de contenu), avec des marges intérieures de 20px (padding) et une bordure (border) de 5px vous obtenez une boîte d'une largeur totale de 200px alors que pour les autres navigateurs la largeur totale est de 250px (200+20+20+5+5) Les paddings et les borders, s'ajoutent normalement à la zone de contenu de 200px.

Ce mode de calcul où les propriétés visibles (espaces et bords) sont incluses dans le calcul de la boîte est appelé "mode Quirks". C'est un modèle de boîte ancien et spécifique à Microsoft.

Avec la version 6.0 d'Internet Explorer, l'interprétation des dimensions CSS des boîtes est la même que pour les autres navigateurs, c'est le modèle de boîte dit "Standard".

Il y a cependant quelques exceptions à cette interprétation qui entretiennent l'illusion que rien n'a changé du côté de chez Microsoft.

En effet, IE 6.0 passe en mode Quirk dans les cas suivants :

• une page HTML sans DOCTYPE (donc non valide),
• une page HTML Frameset ou Transitionnel avec un DOCTYPE tronqué (sans URL de la DTD),
• une page HTML qui contient n'importe quel caractère avant la DTD,
• une page HTML avec une DTD d'une version de HTML inférieure à la version 4,
• une page avec un DOCTYPE XHTML précédé de la déclaration XML (déclaration inutile pour une page xhtml servie en text/html),

Dans ces différents cas, Internet Explorer 6.0 bascule en mode Quirks et interprète les boîtes selon le modèle Microsoft constaté dans les versions précédentes du navigateur, ce qui pose souvent de lourds problèmes de compatibilité.

Dans tous les autres cas il n'y a pas de différence avec les autres navigateurs... pour le plus grand bonheur des concepteurs web.

Conclusion

Pour faciliter la compatibilité de vos documents web, assurez-vous de leur appliquer un Doctype valide et conforme, et en règle générale de leur parfait respect des standards.

Pour aller plus loin

• Tableau récapitulatif des différences de mode standard et quirks selon les navigateurs : http://www.quirksmode.org/css/quirksmode.html
• Une source très complète du navigateur Opera à ce sujet, merci Hermann.

Billet de Eric Le Bihan (EricLB) remanié par le Collectif Alsacréations.