Introduction

Le principal problème n'est pas IE, mais la manière qu'ont certains zéros dans la façon de coder un site Web. En effet, il est d'usage de coder son site, et de visualiser sa création au moyen de Firefox qui, dit-on, respecte très bien les standards (ça, ça reste une façon de voir ). Une fois le site fini, on teste sous IE. Et c'est là qu'apparaît un problème : c'est souvent n'importe quoi (portenawak pour les CSeurs). Et comme le site est fini, il n'est généralement pas facile de cibler la ou les erreurs et ainsi de pouvoir y remédier.

Ce que je conseille fortement, c'est de toujours prendre, pour commencer, un modèle de mise en page de base, provenant du site bien connu qu'est Alsacréations, ici. Ces modèles sont compatibles IE et FF et bien codés. A partir de ces modèles, vous allez pouvoir créer votre site Web sans avoir de réels problèmes.

Pour rende son site compatible IE et FF, il est important de visualiser très régulièrement son site avec chacun des deux navigateurs. Généralement, avec Firefox, vous n'aurez pas de problèmes. Mais avec Internet Explorer, c'est une autre histoire ! Grâce à cette technique de visualisation fréquente, vous allez pouvoir cerner les problèmes, et ainsi les résoudre efficacement, avec les méthodes que je reprends ci-dessous :

• les instructions conditionnelles IE pour le code HTML
• la technique des !important pour le code CSS
• les hacks CSS
• la gestion de la pseudo-classe hover
• la gestion des images PNG 24 bits
• d'autres trucs plus secondaires

Gabarits XHTML

• Alsacréations : http://css.alsacreations.com/Modeles-d [...] n-page-en-CSS
• Gcyrillus : http://gcyrillus.free.fr/gabarits/

Un bon petit truc

Je viens de découvrir récemment une extension bien pratique pour Firefox : IE Tab.

Cette extension permet d?afficher une page Web dans un onglet de Firefox, en utilisant le moteur de rendu d?Internet Explorer. L?utilité de cette extension est que vous ne devez ouvrir qu?un navigateur, tout en testant votre page avec 2 navigateurs





Voici la page de l?auteur, sur Mozdev.org, en anglais (mais l?extension est disponible en Français) : Ici

En fait, le principal problème d'IE vient de son calcul des dimensions. Le calcul des dimensions s?appelle le Box Model (ou Model Box, ou encore Modèle de boîte). Actuellement, il existe 2 Box Model : le modèle dit Standard, recommandé par le W3C et le modèle de Microsoft.

Ces 2 modèles diffèrent dans le calcul des dimensions des éléments. Pour rappel voici une représentation d?un élément :

Explication des 2 Box Model

Si nous nous basons sur le modèle W3C, la largeur totale d?un élément est égale à :



En ce qui concerne le modèle de Microsoft, la largeur totale est égale au contenu du bloc (width). Ce qui veut dire que les margin et les padding sont inclus à l?intérieur même de l?espace réservé au contenu.

Par exemple, un DIV se voit attribuer les propriétés suivantes :

Code : CSS

D?après le Model Box du W3C, la largeur totale du bloc sera : 10+1+5+200+5+1+10 = 232 pixels.
Et d?après le modèle de Microsoft, la largeur totale sera : 1+200+1 = 202. Les largeurs des margin et padding ne sont donc pas prises en compte. Un décalage de 30 pixels sera donc visible.

Les versions d?Internet Explorer

Internet Explorer 5.x (5.1 et 5.5) ne connaît que le modèle de boîte de Microsoft. IE 6, quand à lui intègre les 2 modèles. En présence d?un Doctype valide, il appliquera le modèle du W3C. S?il n?y a pas de Doctype, le modèle Microsoft sera utilisé, pour permettre la compatibilité avec les sites ayant été construit à l?époque d?Internet Explorer 5.x. C?est le Doctype Switching (voir partie suivante).





Voici un exemple en code. Celui-ci est tiré de l?article d?Openweb.

Code : CSS

Code : HTML

Avec un navigateur non-IE, les 2 DIV sont de taille identique (300px). Avec Internet Explorer, s?il passe en mode modèle boîte Microsoft, le DIV vert sera plus petit que le jaune.

• Test du code :
  
  • Pas de Doctype
  • Prologue XML avant le Doctype
  • HTML 4.01 Strict
  • XHTML 1.0 Strict

Le modèle box standard est bien appliqué, mais Internet Explorer a tendance à interpréter bizarrement les marges, les paddings et autres, et c'est pour cela qu?il subsiste parfois quelques petits décalages pas bien graves.

Netscape et IE 4... C´est vieux tout cela. Le Doctype n´existait pas encore (enfin si, mais il n'était pas utilisé) et on n´entendait pas parler de CSS (oui, on sait mettre en page sans CSS ). Les standards du W3C n´étaient alors que moyennement suivi pas les 2 navigateurs leaders. Puis un jour, IE Mac apparu. Ce fut une version d´Internet Explorer pour Mac, mais celui-ci n´exploitait pas le même moteur de rendu que l´IE pour Windows (je parle à l´imparfait, mais actuellement, ces 2 moteurs sont toujours différents : Tasman pour IE Mac et Trident pour IE Windows). En effet, c´était un moteur de rendu respectant beaucoup mieux les standards (de l´époque). Mais, les sites n´étaient pas compatibles avec ces standards. Alors, que faire ?

C´est pour cela que le mode Quirks a été développé. Globalement, en la non présence d´un Doctype, le navigateur passe en mode Quirks. Ce mode a pour but d´interpréter au mieux les anciennes pages Web afin de bien les afficher. Tous les navigateurs possèdent ce mode, mais il ne s´active pas de la même façon, et en particulier avec IE6.

Par exemple, Voici une page :

Code : HTML



Le navigateur ne le sait pas non plus. Il va donc passer en mode Quirks.

Schéma basique : pas de DTD (ou DTD incomplète) -> Mode Quirks.



Normalement on ne peut rien mettre avant le Doctype. Mais en XHTML, on peut mettre ce que l'on appelle un prologue XML. Comme ceci :

Code : HTML

Dans ce cas, seul IE passe en mode Quirks (certaines anciennes versions d'Opera aussi il me semble, mais c'est à vérifier). De même si l'on met un commentaire HTML (on ne dois pas ce de toutes façons ), le mode Quirks est déclenché.



Donc, au final, IE va afficher une belle page XHTML en mode Netscape 4, ce qui peut générer de beaux bogues !

Voici un exemple : un design est réalisé avec un commentaire avant le Doctype. Le site est compatible IE/FF, mais passe évidemment IE en mode Quirks :



Voilà ce qui se passe si on enlève le commentaire avant le Doctype (IE repasse donc en mode de rendu Standard) :





Rien que pour vous, voici quelques liens :

• Doctype switching de Mozilla : http://developer.mozilla.org/en/docs/M [...] TYPE_sniffing
• Doctype switching d'IE : http://msdn.microsoft.com/library/defa [...] ancements.asp
• Doctype switching d'Opera : http://www.opera.com/docs/specs/doctype/
• Un tableau général (vers le milieu de la page) : http://hsivonen.iki.fi/doctype/
• Article d'Alsacréation : http://blog.alsacreations.com/2005/08/ [...] pas-pour-nous
• Article de DarkMag : http://darkmag.net/darkBlog/index.php? [...] is-not-enough