Analyse du mode standard et du mode bizarre dans les navigateurs
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>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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment personnaliser le symbole de redimensionnement via CSS et le rendre uniforme avec la couleur d'arrière-plan?
Apr 05, 2025 pm 02:30 PM
La méthode de personnalisation des symboles de redimension dans CSS est unifiée avec des couleurs d'arrière-plan. Dans le développement quotidien, nous rencontrons souvent des situations où nous devons personnaliser les détails de l'interface utilisateur, tels que l'ajustement ...
Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web?
Apr 05, 2025 pm 10:33 PM
En utilisant récemment des fichiers de police installés localement dans les pages Web, j'ai téléchargé une police gratuite à partir d'Internet et je l'ai installée avec succès dans mon système. Maintenant...
Le texte sous la disposition Flex est omis mais le conteneur est ouvert? Comment le résoudre?
Apr 05, 2025 pm 11:00 PM
Le problème de l'ouverture des conteneurs en raison d'une omission excessive du texte sous disposition flexible et de solutions est utilisé ...
Comment contrôler le haut et la fin des pages dans les paramètres d'impression du navigateur via JavaScript ou CSS?
Apr 05, 2025 pm 10:39 PM
Comment utiliser JavaScript ou CSS pour contrôler le haut et la fin de la page dans les paramètres d'impression du navigateur. Dans les paramètres d'impression du navigateur, il existe une option pour contrôler si l'écran est ...
Pourquoi un élément div spécifique dans le navigateur Edge ne s'affiche-t-il pas? Comment résoudre ce problème?
Apr 05, 2025 pm 08:21 PM
Comment résoudre le problème d'affichage causé par les feuilles de style d'agent utilisateur? Lorsque vous utilisez le navigateur Edge, un élément DIV du projet ne peut pas être affiché. Après avoir vérifié, j'ai posté ...
Pourquoi les feuilles de style personnalisées peuvent-elles prendre effet sur les pages Web locales de Safari mais pas sur les pages Baidu?
Apr 05, 2025 pm 05:15 PM
Discussion sur l'utilisation de styles de style personnalisés dans Safari aujourd'hui, nous allons discuter d'une question sur l'application de feuilles de style personnalisées pour le navigateur Safari. Novice frontal ...
Comment utiliser CSS et Flexbox pour implémenter la disposition réactive des images et du texte à différentes tailles d'écran?
Apr 05, 2025 pm 06:06 PM
Implémentation de dispositions réactives à l'aide de CSS lorsque nous voulons implémenter des modifications de mise en page sous différentes tailles d'écran dans la conception Web, CSS ...
Pourquoi les marges négatives ne prennent-elles pas effet dans certains cas? Comment résoudre ce problème?
Apr 05, 2025 pm 10:18 PM
Pourquoi les marges négatives ne prennent-elles pas effet dans certains cas? Pendant la programmation, les marges négatives dans CSS (négatif ...
