DOCTYPE strict affectant l'espacement entre les images

StackOverflow https://stackoverflow.com/questions/489974

  •  20-08-2019
  •  | 
  •  

Question

J'ai des problèmes d'espacement des images lorsque je suis passé à XHTML Strict DOCTYPE.

Le code suivant - qui utilise la feuille de style de réinitialisation de Yahoo pour supprimer tout le remplissage du navigateur par défaut - laisse un espace d'environ 4 pixels entre les deux images ci-dessous, mais UNIQUEMENT lorsque j'utilise le doctype strict. Pourquoi est-ce?

Ce problème ne concerne que Chrome et Firefox. IE ne montre pas un seul pixel entre les deux images. 

<!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">

<head>
    <link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
</head>

<body>

<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>


</body>
</html>
Était-ce utile?

La solution

En utilisant la réponse de Peter au début, ce qui suit corrige le problème: 

img { vertical-align: bottom }

Cela fonctionne parce que la valeur par défaut pour vertical-align est baseline, ce qui équivaut à la partie du texte & "située au-dessus de la ligne &"; où les bits pendants pendent (minuscules g, q, etc. pendent tous en dessous de cette ligne de base).

Donc, afin de laisser de la place, il laissait 4 pixels d’espace pour ces porte-à-faux.

J'espère que cela avait du sens.

Modifier: aide visuelle de site source
alt text
(source: brightlemon.com )

Autres conseils

Vous trouverez plus d'informations sur les mystérieuses lacunes d'image ici:

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

L'utilisation de Firebug montre que c'est la DIV qui est à l'origine de l'espacement plutôt que de l'image.

J'ai défini la taille de la police: 0; pour le top div et l'écart disparaît.

(Bizarrement, il y a / devrait avoir une taille de police héritée: 0; du corps dans le fichier reset-min.css, vous ne savez donc pas pourquoi cela a fonctionné.)

Dans les doctypes stricts, l'image devient un élément en ligne et se comporte comme un texte. Par conséquent, vous devez modifier sa propriété vertical-align ou modifier sa propriété d'affichage en display: block ou display:inline-block

.

En essayant d’exclure les erreurs courantes, j’ai procédé à la validation par code en fixant au moins 8 erreurs de validation.

Généralement, si un navigateur ne peut pas analyser le document dans le DOCTYPE indiqué, les résultats ne sont pas spécifiés.

Cela ne fonctionne toujours pas, mais voici le code de validation: 

<!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">

<head>
   <link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
    <title>Required</title>
</head>

<body>

    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat1" /></div>
    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat2" /></div>

</body>
</html>

L'affichage: la solution inline-block ne fonctionnait certainement pas pour moi.

La solution vertical-align: bottom a fonctionné, mais avec une mise en garde: en fonction de la situation, il y avait des images que je devais définir sur vertical-align: top

Le passage à des normes peu strictes au lieu de strictes a fonctionné pour moi ... j'ai conservé le formatage IE requis, mais éliminé l'espacement impair des images dans Firefox et Chrome.

https://developer.mozilla.org/en/Gecko%27s_Almost_Standards_Mode

Utilisez la ligne: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top