Taille d'élément et doctype
Salut à tous,
Une bien étrange chose m'arrive. Tout d'abord veuillez trouver ce petit code illustrant mon problème :
Code:
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.
