Maison > interface Web > tutoriel HTML > Analyse du mode standard et du mode bizarre dans les navigateurs

Analyse du mode standard et du mode bizarre dans les navigateurs

黄舟
Libérer: 2017-10-27 10:28:42
original
1980 Les gens l'ont consulté

Quels sont le mode standard et le mode bizarre du navigateur ?

Mode standard :

signifie que le navigateur analyse et exécute le code conformément aux normes du W3C. De cette manière, il utilise la syntaxe prescrite pour le rendu, ce qui peut. être compatible avec différents navigateurs et assurer un rendu correct de la page Web d'affichage.

Mode étrange :

utilise la manière propre au navigateur d'analyser et d'exécuter le code. Étant donné que les différents navigateurs analysent et exécutent le code différemment, nous l'appelons mode étrange.

Pourquoi le mode bizarre existe-t-il toujours ?

Avant que la normalisation du HTML et du CSS ne soit terminée, chaque navigateur avait sa propre implémentation différente de l'analyse HTML et CSS, et de nombreuses anciennes pages Web étaient conçues selon ces implémentations non standard. Une fois les normes HTML et CSS déterminées, les navigateurs doivent, d'une part, implémenter la prise en charge de HTML et CSS conformément aux normes, et, d'autre part, assurer la compatibilité ascendante avec les anciennes conceptions de pages Web non standard. Par conséquent, les navigateurs modernes disposent généralement de deux modes de rendu : le mode standard et le mode bizarre. En mode standard, le navigateur analyse et restitue le document selon les normes HTML et CSS ; tandis qu'en mode bizarre, le navigateur analyse et restitue le document selon l'ancienne implémentation non standard.

Comment le navigateur détermine-t-il quel mode de rendu utiliser ?

Si vous ajoutez <!DOCTYPE html>(Remarque : insensible à la casse) à votre page, cela équivaut à activer le mode standards. Autrement dit, comme le montre le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
  </body>
</html>
Copier après la connexion

En cas d'omission, le navigateur utilisera un mode de rendu qui ne répond pas à certaines normes.

Différences courantes entre le mode standard et le mode bizarre

  • Différences dans le traitement du modèle de boîte : La largeur et la hauteur du modèle de boîte CSS standard sont égales à la hauteur et à la largeur de la zone de contenu, et n'incluent pas le remplissage et les bordures. Cependant, la largeur et la hauteur du modèle de boîte implémentées par les navigateurs. avant IE6 sont calculés en incluant le remplissage et les bordures. Par conséquent, pour IE, les méthodes de calcul de la largeur et de la hauteur du modèle de boîte en mode bizarre et en mode standard sont différentes

  • Alignement vertical des éléments en ligne : de nombreux premiers navigateurs s'alignent ; images à la bordure inférieure de la boîte qui les contient, bien que la spécification CSS exige qu'elles soient alignées sur la ligne de base du texte dans la boîte. En mode standards, les navigateurs basés sur Gecko seront alignés sur la ligne de base, tandis qu'en mode bizarreries, ils seront alignés vers le bas. L'exemple le plus direct est l'affichage d'images. En mode standard, l'image n'est pas alignée avec la bordure inférieure de l'élément parent. Si vous regardez attentivement, vous constaterez qu'il y a un petit écart entre l'image et la bordure inférieure de l'élément parent. En effet, en mode standard, les images sont alignées sur la ligne de base. En mode bizarre, ce problème n'existe pas.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal