Analyse von Browser-Kernel- und Browser-Kompatibilitätsproblemen

Der Inhalt dieses Artikels befasst sich mit der Analyse von Browser-Kernel- und Browser-Kompatibilitätsproblemen. Ich hoffe, dass er für Freunde hilfreich ist.

1. Browser-Kernel

Rendering Engine, übersetzt ins Chinesische, hat viele Namen, wie z. B. Schriftsatz-Engine, Interpretations-Engine und Rendering-Engine . Es wird zum Rendern von Webseiteninhalten und zum Konvertieren des Webseiteninhalts und des Layoutcodes in visuelle Seiten verwendet. Ein Browser kann mehr als einen Kern haben.

1. Schriftsatz-Engine

(1) Trident (Windows) 360 IE
(2) Gecko (plattformübergreifend) Mozilla Firefox, Mozilla SeaMonkey
(3) KHTML ( Linux) ) Konqueror
(4) WebKit (plattformübergreifend) Apple Safari, Symbian-Systembrowser
(5) Chromium (plattformübergreifend) Chromium, Google Chrome, SRWare Iron, Comodo Dragon
(6) Presto (plattformübergreifende Plattform) Opera

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

2. JavaScript-Engine

(1) Chakra
Chakra, die neue JavaScript-Engine, die von IE9 aktiviert wird.
(2) SpiderMonkey/TraceMonkey/JaegerMonkey
SpiderMonkey wird in Mozilla Firefox 1.0–3.0 verwendet, TraceMonkey wird in Mozilla Firefox 3.5–3.6 verwendet und JaegerMonkey wird in Mozilla Firefox 4.0 und nachfolgenden Versionen verwendet.
(3) V8
Auf Chrome und Maxthon 3 anwenden.
(4) Nitro
Gilt für Safari 4 und nachfolgende Versionen.
(5) Linear A/Linear B/Futhark/Carakan
Linear A wird in den Versionen Opera 4.0–6.1 verwendet, Linear B wird in den Versionen Opera 7.0–9.2 verwendet, Futhark wird in den Versionen Opera 9.5–10.2 verwendet. Carakan wird in Opera 10.5 und nachfolgenden Versionen verwendet.
(6)KJS
Die JavaScript-Engine, die KHTML entspricht.

3. Single- und Dual-Core-Engines

(1) Trident/Gecko-Dual-Core-Browser
(2) Trident/WebKit-Dual-Core-Browser
Jetzt am weitesten verbreitet „Dual-Core“-Browser in China Die meisten Browser verfügen über diese Architektur, einschließlich 360 Speed ​​​​Browser, World Window Browser Speed ​​​​Edition, Maxthon 3 Sogou Browser 3, QQ Browser, Maple Browser, Kuai Kuai Browser, Baidu Browser, Ayun Browser (Spätere Versionen), Sunflower Browser, der bizarrste davon ist Maxthon 3. Andere Dual-Core-Browser basieren auf Chromium, während Maxthon auf WebKit basiert, aber zufällig die V8-Engine verwendet.
(3) Trident/Gecko/WebKit-Dreikernbrowser
Der derzeit verfügbare Browser Lunascape Avant aus Japan wird nach dem Hinzufügen des WebKit-Kerns ebenfalls hier aufgeführt. Um ehrlich zu sein, ist Lunascape wirklich schwierig zu bedienen und wirklich seltsam. Jeder Kern ist relativ unabhängig, die Shell selbst ist nicht stark genug und die Stabilität ist nicht hoch. Daher ist es besser, einen Single-Core-Browser zu verwenden.

2. Kompatibilitätsprobleme

Browserkompatibilitätsprobleme werden im Allgemeinen in HTML, Javascript-Kompatibilität und CSS-Kompatibilität unterteilt. Unter anderem sind HTML-bezogene Probleme einfacher zu lösen. Der Browser der höheren Version verwendet lediglich Elemente, die der Browser der niedrigeren Version nicht erkennen kann, sodass er nicht analysiert werden kann. Sie sollten daher darauf achten. Insbesondere fügt HTML5 viele neue Tags hinzu, und Browser mit niedrigeren Versionen haben einen gewissen Einfluss auf den Fortschritt der Zeit

1. CSS-Kompatibilität

(1) Es gibt eine große Lücke dazwischen Die Standardeinstellungen für Rand und Abstand in verschiedenen Browsern verwenden *{margin:0px;padding:0px;}
(2) Die Höhe dieses Tags in IE6, 7 und Ayouli ist unkontrolliert und überschreitet die von Ihnen festgelegte Höhe. Fügen Sie overflow:hidden
zu diesem Tag hinzu (3) Das Bild hat standardmäßig einen Abstand, verwenden Sie float
(4) Die Box wird ausgeblendet und das übergeordnete Element wird hinzugefügt (overflow:hidden;), um ein BFC-Element (5) Die Schriftgröße ist in verschiedenen Browsern inkonsistent. Verwenden Sie die Zeilenhöhe: 14 Pixel. Geben Sie die Höhe an.
(6) IE6 unterstützt keinen transparenten PNG-Effekt
2. HTML-kompatibel

HTML-Artikel

(1) Stilkompatibilitätsprobleme

(2) Seltsamer Modus

Der seltsame Modus ist ein Kompatibilitätsmodus, der dies nicht tut entspricht den W3C-Spezifikationen. Die Breite umfasst contentWidth, den linken und rechten Rand sowie den linken und rechten Rand (dasselbe gilt für die Höhe), ähnlich wie bei box-sizing: border-box;, und die Schriftgröße von Die Tabelle kann nicht vom übergeordneten Element geerbt werden. Die folgenden Situationen lösen den Quirks-Modus des Browsers aus: Kein Schreiben von DOCTYPE löst den Quirks-Modus aus
Fügen Sie die Codierung hinzu. 8" ?>, IE6 löst den Quirks-Modus aus

Hinzufügen vor , IE7 wechselt in den Quirks-Modus

< !DOCTYPE ...> Wenn davor nicht leere Zeichen stehen, wird der seltsame Modus unter IE6 ausgelöst.
Wenn XML vor steht, wird der seltsame Modus ausgelöst unter IE7. Modus, aber keine anderen nicht leeren Zeichen
Überprüfen Sie document.compatMode, um zu sehen, in welchem ​​Modus der Browser arbeitet: Der Wert BackCompat ist der seltsame Modus, der Wert CSS1Compat ist der Standardmodus


(3) display :inline-block Es gibt Lücken zwischen Elementen

<!-- 以下的 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) Mögliches temporäres Fehlerproblem im Dokumentstil des IE

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

Verwandte Empfehlungen:

Sortierung der Browser-Kernel-Informationen

Browser-Kernel-URL-Zerlegungs-Webserver

js Judgement Browsing-Methoden für Browserversion und Browser-Kernel_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonAnalyse von Browser-Kernel- und Browser-Kompatibilitätsproblemen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!