La page ne s'affiche pas correctement avec la DTD

Je crée une page de destination simple pour le serveur Web sur mon ordinateur. À l'heure actuelle, il semble bien:La page ne s'affiche pas correctement avec la DTD

<html> 
    <head> 
    <title>Felix's computer</title> 
    <style>body{background-color:red;font-family:Zapfino,cursive;text-align:center}img{height:50%}a{text-decoration:none;color:inherit}a:hover{color:blue}</style> 
    </head> 
    <body> 
    <div> 
     <h1>STOP - Felix's computer</h1> 
     <h2>Here be dragons...</h2> 
     <img src="dragon.png"><br> 
     You may be looking for <a href="~frief17">Felix's page</a>? 
    </div> 
    </body> 
</html>

Screenshot of page rendering properly

Cependant, dès que j'inclus <!DOCTYPE html>, il semble tout à coup comme ceci:

Screenshot of page rendered with DOCTYPE

Je sais qu'il est à cause de la différence entre le mode 'standards' et le mode 'quirks', mais qu'est-ce que je fais de mal? Quelle partie du CSS est interprétée différemment?

Source

2014-04-16 felixphew

Je pense que la hauteur est calculée en pourcentage de son conteneur, ce qui n'est pas utile dans ce cas. La "bonne" façon de le faire serait de faire une image de fond sur un div, et vous redimensionner l'image avec background-size.

Pour ce cas d'utilisation rapide, vous souhaitez probablement simplement appliquer la hauteur de votre balise d'image en tant qu'attribut HTML.

Source

2014-04-17 00:46:01 swider

La page ne s'affiche pas correctement avec la DTD

Répondre

Questions connexes