Taille d'élément et doctype

**franculo_caoulene** · 03/03/2009, 10h58

Salut à tous,

Une bien étrange chose m'arrive. Tout d'abord veuillez trouver ce petit code illustrant mon problème :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Taille d objet changeant selon le doctype</title>
  <style type="text/css">
  * {margin:0; padding:0; border-style:none; text-decoration:none; color:#333;}
  ul {padding:10px; border:1px solid #666; background:#aaa; overflow:auto; list-style-type:none;}
  li {float:left;}
  a {margin:2px; padding:4px; display:block; border:1px solid #777; background:#888;}
  img {margin:0; padding:0; width:66px; height:66px;}
  </style>
</head>
<body>
  <ul>
    <li><a href=""><img src="img/photo-miniature.jpg" alt="photo" /></a></li>
  </ul>
</body>
</html>

Vous l'avez peut-être remarqué, il y a un doctype en commentaire. En fait, j'ai développé ceci en xhtml transitional, puis je me suis dit, vu mon code, que je pouvais passer en xhtml strict. C'est alors que l'accident arrive.
Sous FF, Opera et Safari la hauteur du contenu de l'élément <a> change! Celle-ci passe de 66px à 71px. Or, l'image, elle, reste à 66px. Les marges externe et interne ainsi que les bordures restent identiques (tout ceci dixit firebug).
Sait-on jamais, l'image de départ fait 80x80. IE, quant à lui, ne change rien.

Auriez-vous une quelconque explication?

Merci d'avance.

**Macmillenium** · 03/03/2009, 11h27

Bonjour,

La différence entre ces deux DTD :
XHTML Transitional : bascule les navigateurs en mode de rendu almost standard
XHTML Strict : bascule les navigateurs en mode de rendu standard.

La différence entre ces deux modes de rendu est souvent très légère.

Pour ton cas, le comportement correcte est celui du mode standard, comme je l'ai dit plus haut, déclenché par ton doctype strict.

Une image est un élément inline aligné par défaut en vertical-align:baseline et se comporte comme du texte en laissant une marge en dessous pour certains caractères comme p ou q.

Tu peux corriger ce problème en ajoutant un display:block sur l'image ou en changeant son alignement avec un vertical-align:middle;

**franculo_caoulene** · 03/03/2009, 11h53

Très bien joué, bravo et merci. J'ai toujours du mal à me souvenir qu'une image est de type en-ligne.

**Macmillenium** · 03/03/2009, 12h08

Un petit détail, sous IE, les deux DTD Transitional et Strict déclenchent le mode Almost standard (pas de mode standard sous IE).
La raison pour laquelle le rendu est resté le même.

**Erwan31** · 03/03/2009, 12h54

Envoyé par franculo_caoulene

Très bien joué, bravo et merci. J'ai toujours du mal à me souvenir qu'une image est de type en-ligne.

De type en-ligne mais remplacé (comme les input par exemple).

@Macmillénium Je ne crois pas que le mode almost standard existe pour IE, je dirais que son mode standard se comporte comme le mode almost standard des navigateurs Gecko, webkit et presto (Opera), mais à confirmer

**Macmillenium** · 03/03/2009, 14h57

Envoyé par Erwan31

@Macmillénium Je ne crois pas que le mode almost standard existe pour IE, je dirais que son mode standard se comporte comme le mode almost standard des navigateurs Gecko, webkit et presto (Opera), mais à confirmer

Peut-être, difficile de faire la différence vu que c'est le même comportement ...

Ce qui est sûr c'est que IE8 (RC1 en tout cas) intègre les 3 modes de rendu Quirks, mode standard de IE7 (probablement Almost standard) et mode standard (jusqu'à présent j'ai pas rencontré de problème avec ce mode de IE8 mais on verra bien).

**franculo_caoulene** · 04/03/2009, 10h06

Envoyé par Erwan31

De type en-ligne mais remplacé

Justement qu'est-ce que ça change?

**Macmillenium** · 04/03/2009, 10h22

Envoyé par franculo_caoulene

Justement qu'est-ce que ça change?

Les éléments inline remplacé (comme img, input, select) ont un comportement proche des éléments de type block, c'est à dire, la possibilité d'attribuer une largeur/hauteur, des marges internes/externes etc.