Analyse des problèmes de noyau du navigateur et de compatibilité du navigateur

Le contenu de cet article concerne l'analyse des problèmes de compatibilité du noyau du navigateur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Noyau du navigateur

Le moteur de rendu, traduit en chinois, porte de nombreux noms, tels que moteur de composition, moteur d'interprétation et moteur de rendu. Il est maintenant communément appelé noyau du navigateur. . Il est utilisé pour restituer le contenu d'une page Web et convertir le contenu de la page Web et le code de mise en page en pages visuelles. Un navigateur peut avoir plusieurs cœurs.

1. Moteur de composition

(1) Trident (Windows) 360 IE
(2) Gecko (multiplateforme) Mozilla Firefox, Mozilla SeaMonkey
(3) KHTML ( Linux) ) Konqueror
(4) WebKit (multiplateforme) Apple Safari, navigateur système Symbian
(5) Chromium (multiplateforme) Chromium, Google Chrome, SRWare Iron, Comodo Dragon
(6) Plateforme Presto (multiplateforme)) Opera

浏览器	内核
IE、百度、世界之窗	Trident
chrome、opera	chromium或称Blink
360、猎豹、2345浏览器	IE+chromium
Firefox	Gecko
Safari	Webkit
搜狗、遨游、QQ浏览器	trident+webkit

2. Moteur JavaScript

(1) Chakra
Chakra, le nouveau moteur JavaScript activé par IE9.
(2) SpiderMonkey/TraceMonkey/JaegerMonkey
SpiderMonkey est utilisé dans Mozilla Firefox 1.0-3.0, TraceMonkey est utilisé dans Mozilla Firefox 3.5-3.6 et JaegerMonkey est utilisé dans Mozilla Firefox 4.0 et les versions ultérieures.
(3) V8
Appliquer à Chrome et Maxthon 3.
(4) Nitro
Appliquer à Safari 4 et versions ultérieures.
(5) Linéaire A/Linéaire B/Futhark/Carakan
Linéaire A est utilisé dans les versions Opera 4.0-6.1, Linéaire B est utilisé dans les versions Opera 7.0~9.2, Futhark est utilisé dans les versions Opera 9.5-10.2, Carakan est utilisé dans Opera 10.5 et les versions ultérieures.
(6)KJS
Le moteur JavaScript correspondant à KHTML.

3. Moteurs monocœur et double cœur

(1) Navigateur double cœur Trident/Gecko
(2) Navigateur double cœur Trident/WebKit
Désormais le plus courant. Navigateur « dual-core » en Chine La plupart des navigateurs ont cette architecture, notamment 360 Speed ​​​​Browser, World Window Browser Speed ​​​​Edition, Maxthon 3 Sogou Browser 3, QQ Browser, Maple Browser, Kuai Kuai Browser, Baidu Browser, Ayun Browser (Versions ultérieures), Tournesol Browser, dont le plus bizarre est Maxthon 3. D'autres navigateurs dual-core sont basés sur Chromium, tandis que Maxthon est basé sur WebKit, mais il utilise le moteur V8.
(3) Navigateur à trois cœurs Trident/Gecko/WebKit
Celui actuellement disponible devrait être le Lunascape Avant du Japon sera également classé ici après avoir ajouté le noyau WebKit. Pour être honnête, Lunascape est vraiment difficile à utiliser et vraiment bizarre. Chaque cœur est relativement indépendant, le shell lui-même n'est pas assez solide et la stabilité n'est pas élevée, il est donc préférable d'utiliser un navigateur monocœur.

2. Problèmes de compatibilité

Les problèmes de compatibilité des navigateurs sont généralement divisés en compatibilité HTML, Javascript et CSS. Parmi eux, les problèmes liés au HTML sont plus faciles à gérer. C'est simplement que la version supérieure du navigateur utilise des éléments que la version inférieure du navigateur ne peut pas reconnaître, ce qui l'empêche d'analyser, vous devez donc y prêter attention. En particulier, HTML5 ajoute de nombreuses nouvelles balises, et les navigateurs de versions inférieures ont un peu d'impact sur l'évolution des temps

1. Compatibilité CSS

(1) Il y a un grand écart entre les paramètres par défaut de marge et de remplissage dans différents navigateurs. Utilisez *{margin:0px;padding:0px;}
(2) La hauteur de cette balise dans ie6, 7 et Ayouli n'est pas contrôlée et dépasse la hauteur définie par vous-même. Ajoutez overflow:hidden
à cette balise ( 3) L'image a un espacement par défaut, utilisez float
(4) La boîte se réduit et l'élément parent est ajouté (overflow: Hidden;) pour devenir un élément BFC
(5) La taille de la police est incohérente dans différents navigateurs, utilisez line-height :14px; Spécifiez la hauteur
(6) IE6 ne prend pas en charge l'effet transparent png
(7) Paramètre d'attribut de compatibilité CSS Hack

2. Compatible HTML

Article HTML
(1) Problèmes de compatibilité des styles

(2) Mode bizarre
Le mode bizarre est un mode de compatibilité qui ne conforme aux spécifications du W3C. La largeur inclut la largeur du contenu, le remplissage gauche et droit et les bordures gauche et droite. La plage entière (également la hauteur), similaire à la taille de la boîte : border-box ; et la taille de la police du tableau. ne peut pas être hérité de l'élément parent. Les situations suivantes déclencheront le mode Quirks du navigateur :

Ne pas écrire DOCTYPE déclenche le mode Quirks
Ajouter l'encodage , IE6 déclenchera le mode Quirks
Ajouter avant , IE7 entrera en mode Quirks
< !DOCTYPE ...> S'il y a des caractères non vides avant, le mode bizarre sera déclenché sous IE6
S'il y a du XML avant , il ne déclenchera pas le mode bizarre. sous le mode IE7, mais ne peut pas avoir d'autres caractères non vides
Vérifiez document.compatMode pour voir dans quel mode le navigateur fonctionne : la valeur BackCompat est le mode bizarre, la valeur CSS1Compat est le mode standard

(3) display :inline-block Il y a un écart entre les éléments

<!-- 以下的 li 元素是 display: inline; 类型的 -->
<!-- 这样写元素之间有间隙 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>pineapple</li>
  <li>peach</li>
  <li>orange</li>
</ul>
<!-- 换个写法解决问题-->
<ul>
  <li>apple</li><li>
  banana</li><li>
  pineapple</li><li>
  peach</li><li>
  orange</li>
</ul>

(4) IE peut avoir un échec temporaire du style de document

<head>
    <!-- meta部分 -->
    <title></title>
    <!-- 可能的script部分 -->
    <script type="text/javascript"></script>   <!-- 关键：添加一个空标签 -->
    <!-- link部分 -->
</head>

Recommandations associées :

Tri des informations du noyau du navigateur

Serveur Web de décomposition d'URL du noyau du navigateur

Méthode JS pour déterminer la version du navigateur et les compétences kernel_javascript du navigateur

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!