2008-10-25 7 views
4

J'ai un div avec un tag <h1> dans un div, sans marges. Si je définis un doctype, un espace blanc apparaît au-dessus de la div.Pourquoi une balise h1 est-elle différente dans un div, lorsqu'un doctype est défini?

Si je supprime les <h1> balises, ou supprimer la définition de DOCTYPE, il n'y a pas d'espace (comme il devrait y avoir Pourquoi

Exemple HTML.?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <style> 
     body { 
      margin:0 
     } 
     #thediv { 
      background-color:green 
     } 
    </style> 
</head> 
<body> 
    <div id="thediv"> 
     <h1>test</h1> 
    </div> 
</body> 
</html> 

Le problème est l'espace au-dessus du div vert, retirez le DOCTYPE et l'espace disparaît, changer l'étiquette <h1> à <b> et l'espace disparaît aussi. Il arrive avec tout type de document (XHTML/HTML, stricte/transition/etc)

Happens in presque tous les navigateurs (utilisant http://browsershots.org). Fait intéressant, le seul navigateur qui semble l'afficher correctement était Internet Explorer 6.0.

Répondre

7

L'espace au-dessus du div vert est le comportement correct selon le CSS spec. C'est parce que la marge supérieure de la h1 jouxte la marge supérieure de la div.

Une façon de garder la marge de h1 à l'intérieur du div est d'ajouter une bordure à la div:

#thediv{ background-color:green; border: 1px transparent solid; } 
+0

Ceci est une bonne réponse, mais il se sent si mal! (pas ta faute) –

1

Le DOCTYPE signale le mode standard; c'est pourquoi IE6 l'affiche "correctement" (en fait faux), parce que son support de normes est nul. Fondamentalement, en mode standard, il suit les règles de disposition CSS telles que définies dans la spécification, par opposition à ce que vous attendez ("mode quirks").

3

C'est probablement quelque chose à voir avec le mode "quirks" que certains navigateurs invoquent en l'absence de doctype (ou la présence d'un type mal formé).

Je vous suggère de reset CSS de votre page et de continuer. La vie est trop courte.

+0

Cela le trie. J'ai essayé la feuille de style CSS-reset de Yahoo, mais elle n'a pas trié cela. Celui que vous avez lié à fait! – dbr

0

Vous avez quelques isssues ici:

  1. Ne pas avoir un DOCTYPE permet aux navigateurs d'utiliser le mode 'quirks' plutôt que d'interpréter votre code conformément aux normes. Ceci est conçu pour le vieux code 'tag soupe' - si vous écrivez un nouveau code, vous devez utiliser un DOCTYPE et valider par rapport à celui-ci.

  2. Les navigateurs sont libres de fournir des «styles par défaut» pour les éléments HTML. Si vous voulez faire apparaître votre page différemment, vous devez spécifier comment. La plupart des pages spécifient au minimum les styles des éléments body et div. Vous voulez également contrôler l'élément h1, vous devez donc le styliser aussi.

Questions connexes