Maison  >  Article  >  interface Web  >  La différence entre le rôle du doctype et le mode standards et le mode de compatibilité

La différence entre le rôle du doctype et le mode standards et le mode de compatibilité

迷茫
迷茫original
2017-03-25 10:13:162179parcourir

Le rôle de DOCTYPE et la différence entre le mode standards et le mode compatibilité

  1. 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

    1. 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

    2. la déclaration n'est pas une balise HTML, mais une instruction utilisée pour indiquer au navigateur la version HTML actuelle

    3. 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.

    4. 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

    5. 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn