Maison > Article > interface Web > La différence entre le rôle du doctype et le mode standards et le mode de compatibilité
en-tête du document HTML, avant la balise , La différence entre mode standards et mode de compatibilité : Mode standardLa mise en page et le mode de fonctionnement JS sont tous exécutés selon les normes les plus élevées prises en charge par le navigateur. En Mode de compatibilité, les pages sont affichées de manière vaguement rétrocompatible, simulant le comportement des anciens navigateurs pour empêcher le site de ne pas fonctionner.
Différences spécifiques :
1. Modèle de boîte
En mode strict : la largeur est la largeur du contenu, et la largeur réelle de l'élément = width
En mode de compatibilité : la largeur est =width+ ; padding+border
2. En mode de compatibilité, vous pouvez définir le pourcentage de hauteur ainsi que la hauteur et la largeur des éléments en ligne
En mode Standards, la définition de la largeur et de la hauteur des éléments en ligne tels que la durée ne prendra pas effet, tandis que dans mode de compatibilité, prendra effet.
En mode standards, la hauteur d'un élément est déterminée par le contenu qu'il contient. Si l'élément parent ne définit pas de hauteur, il n'est pas possible pour l'élément enfant de définir un pourcentage de hauteur.
3. Utiliser margin:0 auto pour définir le centrage horizontal ne fonctionnera pas dans IE
Utiliser margin:0 auto peut centrer l'élément horizontalement en mode standard, mais cela ne fonctionnera pas en mode de compatibilité (utilisez l'option text-align attribut) Solution)
body{text-align:center};#content{text-align:left}
4. En mode de compatibilité, les attributs de police du tableau ne peuvent pas hériter des paramètres du calque supérieur, et du blanc. -space:pre ne sera pas valide. La définition du remplissage de l'image sera invalide
L'instruction doit être en tête du document HTML, avant le < html>, indique à l'analyseur du navigateur d'utiliser la norme de document qui analyse ce document. Un DOCTYPE inexistant ou mal formaté entraînera le rendu du document en mode compatibilité . HTML5 n'est pas sensible à la casse
la déclaration n'est pas une balise HTML, mais une instruction utilisée pour indiquer au navigateur la version HTML actuelle
Le moteur de mise en page HTML des navigateurs modernes détermine s'il faut utiliser le mode de compatibilité ou le mode standards pour restituer le document en vérifiant le doctype. Certains navigateurs ont un modèle proche des standards.
Dans HTML4.01, la déclaration pointe vers une DTD Puisque HTML4.01 est basé sur SGML, la DTD spécifie des règles de balisage pour garantir que le navigateur restitue le contenu. correctement
HTML5 n'est pas basé sur SGML, il n'est donc pas nécessaire de spécifier une DTD
La différence entre mode standards et mode de compatibilité : Mode standardLa mise en page et le mode de fonctionnement JS sont tous exécutés selon les normes les plus élevées prises en charge par le navigateur. En Mode de compatibilité, les pages sont affichées de manière vaguement rétrocompatible, simulant le comportement des anciens navigateurs pour empêcher le site de ne pas fonctionner.
Différences spécifiques :
1. Modèle de boîte
En mode strict : la largeur est la largeur du contenu, et la largeur réelle de l'élément = width
En mode de compatibilité : la largeur est =width+ ; padding+border
2. En mode de compatibilité, vous pouvez définir le pourcentage de hauteur ainsi que la hauteur et la largeur des éléments en ligne
En mode Standards, la définition de la largeur et de la hauteur des éléments en ligne tels que la durée ne prendra pas effet, tandis que dans mode de compatibilité, prendra effet.
En mode standards, la hauteur d'un élément est déterminée par le contenu qu'il contient. Si l'élément parent ne définit pas de hauteur, il n'est pas possible pour l'élément enfant de définir un pourcentage de hauteur.
3. Utiliser margin:0 auto pour définir le centrage horizontal ne fonctionnera pas dans IE
Utiliser margin:0 auto peut centrer l'élément horizontalement en mode standard, mais cela ne fonctionnera pas en mode de compatibilité (utilisez l'option text-align attribut) Solution)
body{text-align:center};#content{text-align:left}
4. En mode de compatibilité, les attributs de police du tableau ne peuvent pas hériter des paramètres du calque supérieur, et du blanc. -space:pre ne sera pas valide. La définition du remplissage de l'image sera invalide
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!