Doctype html issue

Je crée une page qui utilise un éditeur WYSIWYG. Comme la plupart des éditeurs, il met tout dans "<p>" tags.Doctype html issue

Cela donne un problème de formatage lorsqu'une image a 100% de hauteur et de largeur.

Le code HTML suivant montre la question:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>No doc type</title> 
    <style type="text/css"> 
     /* css reset */ 
     * { 
      vertical-align: baseline; 
      font-family: inherit; 
      border: 0 none; 
      outline: 0; 
      padding: 0; 
      margin: 0; 
     } 

     html{ 
      font-size:100%; 
      height: 100%; 
     } 

     body{ 
      height: 100%; 
      font-size:62.5%; /* Reduce to 10px base */ 
      font-family:Arial, Helvetica, sans-serif; 
     } 
    </style> 
    </head> 
    <body style="margin:0;"> 
     <div> 
      <div style="width: 500px; height: 200px;"> 
       <div> 
        <div style="border:1px solid #000; padding: 0; width: 498px; height: 198px;"> 
         <p> 
          <img style="height: 100%; width: 100%;" src="http://www.google.com/logos/newyears10.gif"/>    
         </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Dans Firefox, la balise p déborde en fait la div. Cela rend l'image à 100% de hauteur soit plus de 100% de la div.

Si je supprime le doctype, le problème est résolu. Je ne comprends pas vraiment les doctypes, mais je pense que celui que j'ai utilisé était un bon (je l'ai googlé). Je pense que c'est mauvais de ne pas en utiliser un.

Quelqu'un sait-il comment afficher ceci correctement avec un doctype?

Merci

Source

2010-01-01 Christine Isl.

Ce poste devrait être déplacé vers Doctype. –

Je ne suis pas sûr de ce que vous pouvez faire avec la page, mais le réglage de la hauteur du paragraphe corrigera la sortie.

div p{ height: 100%; }

Source

2010-01-01 07:39:49

Comme écrit Zurahn, le réglage de la hauteur de p va résoudre le problème.

Pour comprendre cela (et d'autres arrivent à des variations qui pourraient mieux vous servir): 1. L'image est nativement 311 x 137 2. Parce que le p n'a pas la hauteur, l'image peut comprendre la largeur, mais pas la hauteur, de l'élément limitant (le p). 3. L'image devient donc aussi grande que la largeur et redimensionne l'image - créant une hauteur de 219px 4. Le p s'étire à son tour pour s'adapter à l'image. 5. Donner une hauteur au p permet à l'image de connaître la hauteur dont elle devrait obtenir 100%. Il peut ensuite redimensionner l'image en conséquence. ouch, ce qui n'était pas si bien écrit:

Mais maintenant le q est - pourquoi ne reçoit-il pas la hauteur de son ancêtre - de la même façon qu'il a obtenu la largeur de l'ancêtre?

Et la réponse à cela a à voir avec la façon dont la taille est altérée par le navigateur, qui à son tour a à voir avec les tolérances du navigateur pour les choses qui débordent jusqu'à la hauteur.

Source

2010-01-01 08:39:34 SamGoody

Je pense avoir le même problème que vous. Le doctype html ajoute un espacement au bas de la page. Voici quelques solutions. Vous pouvez ajouter l'un des attributs à l'image.

style="display:block"
add align attribut comme align="absmiddle"
ajouter float comme style="float:left"

Source

2011-07-10 09:25:03 Elvis

Doctype html issue

Répondre

Questions connexes