ブラウザのカーネルとブラウザの互換性の問題の分析-htmlチュートリアル-php.cn

ブラウザのカーネルとブラウザの互換性の問題の分析

不言

リリース： 2018-08-15 14:17:06

オリジナル

1645 人が閲覧しました

この記事の内容はブラウザのカーネルとブラウザの互換性の問題に関するもので、困っている人は参考にしていただければ幸いです。

1. ブラウザカーネル

レンダリングエンジンは中国語に翻訳され、植字エンジン、解釈エンジン、レンダリングエンジンなど、現在ではブラウザカーネルと呼ばれています。これは、Web ページのコンテンツをレンダリングし、Web ページのコンテンツとレイアウトコードをビジュアルページに変換するために使用されます。ブラウザーには複数のコアがある場合があります。

1. 植字エンジン

(1) Trident (Windows) 360 IE
(2) Gecko (クロスプラットフォーム) Mozilla Firefox、Mozilla SeaMonkey
(3) KHTML (Linux) Konqueror
(4) WebKit (クロスプラットフォーム) ) Apple Safari、Symbian システムブラウザ
(5) Chromium (クロスプラットフォーム) Chromium、Google Chrome、SRWare Iron、Comodo Dragon
(6) Presto (クロスプラットフォーム) Opera

... SafariSogou、Aoyou、QQブラウザ

2. JavaScript エンジン

(1) Chakra
Chakra、IE9 で有効になる新しい JavaScript エンジン。
(2)SpiderMonkey/TraceMonkey/JaegerMonkey
SpiderMonkeyはMozilla Firefox 1.0～3.0で使用され、TraceMonkeyはMozilla Firefox 3.5～3.6で使用され、JaegerMonkeyはMozilla Firefox 4.0以降のバージョンで使用されます。
(3)V8
Chrome および Maxthon 3 に適用します。
(4) Nitro
Safari 4 以降のバージョンに適用されます。
(5) リニア A/リニア B/フサルク/カラカン
リニア A は Opera 4.0 ～ 6.1 バージョンで使用され、リニア B は Opera 7.0 ～ 9.2 バージョンで使用され、フサルクは Opera 9.5 ～ 10.2 バージョンで使用され、カラカンはOpera 10.5 以降のバージョン。
(6)KJS
KHTMLに対応したJavaScriptエンジンです。

3. シングルコアエンジンとデュアルコアエンジン

(1) Trident/Gecko デュアルコアブラウザ
(2) Trident/WebKit デュアルコアブラウザ
現在、中国で最も主流の「デュアルコア」ブラウザは基本的にこのアーキテクチャを採用しています、360 Speed Browser、Window of the World Browser Express Edition、Maxthon 3 Sogou Browser 3、QQ Browser、Maple Browser、Kuai Kuai Browser、Baidu Browser、Ayun Browser (late version)、Sunflower Browser、その中で最も奇妙なものですマクソン3.他のデュアルコアブラウザは Chromium をベースにしており、Maxthon は WebKit をベースとしていますが、たまたま V8 エンジンを使用しています。
(3) Trident/Gecko/WebKit の 3 コアブラウザ
現在利用可能なものは、WebKit コアを追加した後の日本の Lunascape もここに分類されます。正直に言うと、Lunascape は非常に使いにくく、非常に奇妙です。各コアは比較的独立しており、シェル自体の強度が十分ではなく、安定性も高くないため、シングルコアのブラウザを使用することをお勧めします。

2. 互換性の問題

ブラウザの互換性問題は、一般に HTML、JavaScript の互換性、CSS の互換性に分けられます。このうち、HTML 関連の問題は対処が簡単ですが、上位バージョンのブラウザでは下位バージョンのブラウザでは認識できない要素が使用されており、解析できなくなるだけなので注意が必要です。特にHTML5では新しいタグが多く追加されており、下位バージョンのブラウザは時代の進歩に少なからず影響を与えています

1.CSS互換性

(1)marginとpaddingのデフォルト設定に大きなギャップがあります*{margin:0px;padding :0px;} を使用してください
(2) IE6、7、Ayouli ではこのラベルの高さが制御されず、このラベルに overflow:hidden を追加します。 (3) 画像にはデフォルトでスペースがあり、float を使用します
(4) ボックスが折りたたまれ、親要素が追加され (overflow:hidden;) BFC 要素になります
(5) フォントサイズはブラウザーによって異なります。高さを指定するには line-height:14px; を使用します
(6) IE6 は png の透明効果をサポートしません
(7) CSS Hack の互換性属性設定

2、HTML の互換性

HTML 記事

(1) スタイルの互換性の問題

(2) 奇妙なモード奇妙なモードは、次の互換モードです。幅には contentWidth、左右のパディング、左右の境界線が含まれ、範囲全体 (高さについても同じ)、および font-size と同様です。テーブルを親要素から継承することはできません。次の状況では、ブラウザの Quirks モードがトリガーされます。

DOCTYPE を記述していない場合、Quirks モードがトリガーされます

の前に追加します。 IE6 は Quirks モードをトリガーします
の前にを追加すると、IE7 は Quirks モードに入ります
の前に空文字がある場合、IE6 では奇妙なモードがトリガーされます
前に XML がある場合、IE7 では奇妙なモードはトリガーされませんが、他の空文字以外の文字は存在できません
チェックドキュメント .compatMode で、ブラウザがどのモードで動作しているかを確認できます: 値 BackCompat は奇妙なモード、値 CSS1Compat は標準モードです

(3) 表示: inline-block 要素間にギャップがあります

<!-- 以下的 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 が表示される場合があるドキュメントスタイルの一時的な障害の問題

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

ログイン後にコピー