ホームページ  >  記事  >  ウェブフロントエンド  >  Quirks モードとは何ですか? _html/css_WEB-ITnose

Quirks モードとは何ですか? _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:35:111203ブラウズ

DOCTYPE とは:

DOCTYPE、Document Type Declaration (Document Type Declaration、略称 DTD) とも呼ばれます。通常、DOCTYPE は HTML ドキュメントの先頭、ルート要素 HTML の開始タグの前に配置されます。このようにして、ブラウザが HTML ドキュメント本文を解析して、採用する必要がある

レンダリング モードを決定する前に、現在のドキュメントのタイプを判断できます (レンダリング モードが異なると、ブラウザによる CSS コードの解析や JavaScript スクリプトにも影響します)。

プログラムを作成するときに、特に新しい機能が古い機能と互換性がない場合に、元のインターフェイスを変更せずに、より強力な機能を提供する方法について、この問題によく遭遇します。この種の問題が発生した場合の一般的なアプローチは、パラメーターと分岐を追加することです。つまり、特定のパラメーターが true の場合は新しい関数を使用し、パラメーターが true でない場合は古い関数を使用して、問題が発生しないようにします。 destroy オリジナルのプログラムは新しい機能も提供します。 IE6 も同様のことを行い、DTD をこの「パラメータ」として扱います。前のページに DTD を記述する人はいないため、IE6 は、DTD が記述されている場合、このページはより新しい適切なレイアウトの CSS サポートを使用することを意味すると想定します。そうでない場合は、以前のレイアウトが互換性があります。これがQuirksモード(個性モード、奇妙なモード、奇妙なモード)です。

DOCTYPEと各種モードの関係:

混合モード:

DOCTYPEは書かない

おおよその標準モード:

標準モード:

トランジショナルまたはフレーム化された HTML 宣言と、トランジショナルまたはフレーム化された XHTML 宣言の両方により、ブラウザが近似標準モードになる可能性があることがわかります。 DOCTYPE 宣言、厳密な

HTML 宣言、および html5 の厳密な XHTML 宣言により、ブラウザは標準モードになります。

3 つのモードのパフォーマンスの違い:

まず第一に、混合モードには互換性がないため、お勧めできません。 IE (IE6 ~ IE9) では、混合モードは IE5.5 カーネルを使用してページを解析およびレンダリングします。第二に、近似標準

モードは、可能な限り標準に従いながら、一部の非推奨のタグなどの一部の非標準コードと互換性があります。標準モードは、統一された標準を実現するための最適なモードです。

タグを閉じる必要があり (閉じる必要がないのは DOCTYPE タグのみです)、古いタグは使用できません。現在、最も一般的に使用されている DOCTYPE 宣言は、移行 HTML または

XHTML です。これは、一部の古いコードとの互換性が最も高いためです。ただし、テクノロジーをリードする企業 (Google、Facebook、Twitter など) はすべて、HTML5 の

DOCTYPE 宣言、つまり を使用しています。この宣言がトリガーするモードは、厳密な HTML または厳密な XHTML と同じです。トリガー モードはまったく同じですが、コードが節約され、前方互換性がある (HTML5 時代) という利点があります。

1. Quirks モードでは、IE の幅と高さにはパディングと境界線も含まれます。

2. インライン要素の高さと幅を設定する: 標準モードでは、 などのインライン要素の幅と高さの設定は有効になりませんが、互換モードでは有効になります。 margin:0 auto は水平方向の中央揃えを設定します。 margin:0 auto を使用すると、標準モードでは要素を水平方向に中央揃えにできますが、quirks モードでは失敗します。

IE6/7 および IE8 混合モード (互換モード) では、text-align:center はブロックレベルの要素を中央揃えにできます。他のブラウザでは、text-align:center はインライン コンテンツでのみ機能します。

この問題を解決するより良い方法は、親コンテナを基準にして中央に配置する必要があるすべてのブロックレベル要素に「margin: 0 auto」を設定することです。ただし、この方法はIE6/IE7/IE8の混合モードではサポートされていないため、親コンテナの「text-align:center;」を設定する必要があります。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。