Différence entre navigateur malgré un DTD XHTML 1.0 Strict

**afrodje** · 14/02/2010, 18h01

Bonjour,

Je ne comprend pas pourquoi il y a une telle différence entre les navigateurs (en l'occurrence Firefox 3.5, IE7 et chrome) malgré le DTD suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Y-a-t-il un autre moyen d'homogénéiser les pages? Un autre entête?
Est-ce mes scripts à revoir?

Vous pouvez voir ces différences sur cette URL (site en test):

Merci d'avance.

**Ethyde** · 15/02/2010, 11h30

Un DTD ne fait pas tout, il ne fait qu'indiquer si le document est conforme à tel ou tel normes, mais les navigateurs en font ce qu'ils veulent, des normes, en l'occurence il me semble que Firefox/Safari-Chrome/Opera sont à peu un peu plus de 90% de respect des normes, IE 8 doit atteindre difficilement les 80% (alors ses version anterieur j'en parle même pas

)

Bienvenu dans le monde merveilleux de la compatibilité multi-navigateur

**afrodje** · 15/02/2010, 12h05

Est-ce qu'il y a une solution alors ?
Quelle est votre réaction quand vous avez une tel différence entre les navigateurs? Changement de script ou "je laisse comme ça, ils ont cas ce mettre d'accord !"

**Ethyde** · 15/02/2010, 13h08

Oula ben déjà, pour ma part, c'est un paramètre que j'intègre à mon dev en amont, c'est une des contraintes qu'il vaux mieux anticiper que de regler une fois le dev fait car elle peut impliquer de refaire certaine partie ou de ré-organiser sont code source.

Ceci dit, et hormis si le client n'est pas à cheval sur le coté multi navigateur (c'est plus que rare même dans le cadre d'un intranet), tu doit au moins être bon sur FF 3.0 et +, IE7 et 8, Safari/Chrome.

Les solutions il y a plein de toute sortent

**thelvin** · 15/02/2010, 16h01

Accessoirement, si le XHTML n'est pas valide, les navigateurs se débrouillent chacun de leur côté pour réparer ce qu'ils peuvent.

A priori donc il peut être une bonne idée d'apprendre d'abord à faire du XHTML valide (la page que tu donnes ne respecte que peu de contraintes XML, déjà.)

Sauf que, être valide XHTML et bien s'afficher dans IE6 ou IE7, ce n'est pas toujours facile... Alors, si on trouve d'autres moyens pas trop compliqués, il ne faut pas trop se gêner.

**Jérémie A.** · 15/02/2010, 19h59

Je n'ai pas accès à Internet Explorer depuis ce PC mais c'est quoi le soucis? entre Chrome et Firefox, ce sont les miniatures qui déconnent, je ne vois que ca (en un très rapide coup d'oeil). A priori, cela viendrait des dimensions en % données à celles-ci.
Sinon, face aux problèmes multi-navigateurs, la plupart du temps, je résous mes problèmes au travers de "feuilles de styles conditionnelles" pour les différences d'interprétation CSS avec la famille "IE" ne rencontrant que très rarement de différences entre les autres navigateurs.
Par contre, comme l'indique thelvin, le bon point de départ est déjà d'avoir des pages aussi conformes que possible.

**afrodje** · 16/02/2010, 09h08

Envoyé par Jérémie A.

Je n'ai pas accès à Internet Explorer depuis ce PC mais c'est quoi le soucis? entre Chrome et Firefox, ce sont les miniatures qui déconnent, je ne vois que ca (en un très rapide coup d'oeil). A priori, cela viendrait des dimensions en % données à celles-ci.

Le menu "COLLECTION" ne se déroule pas sous IE.

**Erwan31** · 17/02/2010, 13h41

Bonjour,
au niveau du rendu la DTD n'influence le rendu qu'en basculant sur tel ou tel moteur de rendu selon le doctype choisi (voir doctype switching) > mode de rendu standard, almost standard et Quirks (appelé aussi mode de compatibilité descendante ou mode natif chez IE).

Envoyé par Thelvin

Accessoirement, si le XHTML n'est pas valide, les navigateurs se débrouillent chacun de leur côté pour réparer ce qu'ils peuvent.

A priori donc il peut être une bonne idée d'apprendre d'abord à faire du XHTML valide (la page que tu donnes ne respecte que peu de contraintes XML, déjà.)

+1 Effectivement le mécanisme de gestion des erreurs n'étant pas standardisé, la première chose à faire est de rendre ton document valide (et essentiellement de vérifier que tes fermeture de tag sont bien présente et bien placées, ainsi que la syntaxe des élément et attributs)

La méthode la plus répandue pour diminuer les différences de rendu consiste à implémenter un reset CSS qui annulera par exemple les différence de hauteur de marge sur les paragraphe d'un navigateur à l'autre. Mais attention à ne pas en absuser et à les utiliser en connaissance de cause.
Il est préférable et plus sensé pour certain éléments de mettre en place un set CSS: par exemple p {margin: 1.5em 0 .8em} au lieu de p{margin:0}.

Ça c'est pour homogénéiser et les surclassant par tes propres style les style par défaut du navigateur selon les règles de la cascade.
Je te conseil donc d'utiliser une CSS commun à tout tes projets et placée en amont de la CSS relative au projet.

Ensuite tu peux avoir des différence de rendu dû à tel ou tel comportement du navigateur qui se conforme plus ou moins bien aux standards CSS (et UAAG). L'anticipation de ceux-ci ne peut s'acquérir qu'avec l'expérience...

En plus de cela et s'agissant d'IE5 à 7, tu dois prendre connaissance des différences d'affichage dues au concept du Haslayout.