検索

ホームページ  >  記事  >  ウェブフロントエンド  >  DTD と pattern_html/css_WEB-ITnose

DTD と pattern_html/css_WEB-ITnose

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

まとめ

ページを作成するときにテストしなければならないのは、結局のところ、IE ブラウザは依然として高いシェアを持っています。 HTML5 の普及により、プロジェクトでは IE と互換性のある最小バージョンが IE8 以降であることが必要になる場合がありますが、IE の以前のバージョンと互換性のあるプロジェクトはまだ多くあります。したがって、IE ブラウザの低いバージョンでは、ページ レイアウトの乱れの問題がよく発生します。これは、IE ブラウザにはページに影響を与える 2 つのモードがあるためです。

ドキュメント検証メカニズム (DTD)

DTD は HTML ファイルです。メカニズムは HTML ファイルの一部です。 3 つのドキュメント タイプ: S (厳密)、T (移行)、F (フレームセット)。

  • 厳密
    プレゼンテーション層の乱雑さを排除したクリーンなマークアップ。
  • Transitional
    DTD には、W3C がスタイルシートに移動することを想定しているレンダリング属性と要素を含めることができます。
  • Frameset
    を使用する 読者がカスケード スタイル シート (CSS) をサポートしていないブラウザを使用していて、HTML のレンダリング機能を使用する必要がある場合は、フレームを含むドキュメントに DTD を使用する必要があります。 Frameset 要素が body 要素を置き換えることを除けば、Frameset DTD は Transitional DTD と同等です

    • HTML5 は DTD を簡素化し、直接 fef50554eca1a427827adaa329da8122 として使用できます。

    モード

    このモードは主に IE ブラウザ用です。IE 7 以降では、Microsoft のコーディング仕様は W3C によって定められた標準とは異なります。ただし、IE は非常に大きな市場シェアを持っているため、開発者は Microsoft の仕様に従ってコードを記述します。主要なブラウザ メーカーと W3C 組織の取り組みにより、ブラウザの標準化がますます明らかになってきています。 IE6/7と互換性を持たせるために、MicrosoftはIE8ブラウザにモード機能を追加しました。これにより、コード標準の不一致によって引き起こされる問題を解決できます。

    ブラウザモードとドキュメントモードの 2 つのモードがあります。これら 2 つのモードの違いは何ですか?

  • ブラウザ モード
    は、この Web ページの IE のデフォルトのドキュメント モードを切り替え、ブラウザのさまざまなバージョンの条件付きコメントを解析し、ユーザー エージェント (User-Agent) 文字列の値を Web サイト サーバーに送信するために使用されます。 Web サイトは、ブラウザーから返されたさまざまなユーザー エージェント文字列に基づいてブラウザーのバージョンとインストールされている機能を判断できるため、さまざまなページ コンテンツをさまざまなブラウザーに返すことができます。デフォルトでは、IE8 のブラウザ モードは IE8 です。ユーザーは、別のブラウザ モードに手動で切り替えることができます。
  • ドキュメント モード
    は、IE のページ レイアウト エンジン (Trident) が Web ページ コードの解析とレンダリングに使用するバージョンを指定するために使用されます。ドキュメント モードを切り替えると Web ページが更新されますが、ユーザー エージェント文字列のバージョン番号は変更されず、サーバーから Web ページが再ダウンロードされることもありません。ブラウザ モードを切り替えると、ブラウザは対応するドキュメント モードに自動的に切り替わります。

    • ドキュメント モードの場合、各ブラウザには異なる動作モードがあります

    はい標準モード(標準モード)はいはいはいはい

    ブラウザがページを表示するドキュメントモードを制御するにはどうすればよいですか?

    23786d42039592619c59f32f943954c9

    上記のコードは、IE ブラウザが標準ドキュメント モードでページをレンダリングすることを指定するために使用されます。特定のバージョンを指定します。例: IE=8

    これを制御する必要があるのはなぜですか?明らかに、この要素を追加すると、ブラウザーにページのレンダリングに使用するモードを伝えることができます。IE ブラウザーの上位バージョンでは通常どおり表示されますが、下位バージョンになるとレイアウトがおかしくなります。正しい DTD ステートメントです。

    現在のページのドキュメント モードを決定します 

     1 <!DOCTYPE html> 2 <html> 3 <head> 4     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5     <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1"> 6 </head> 7 <body> 8     <script> 9         function detect() {10             var mode = document.documentMode;11             switch (mode) {12                 case  5:13                     alert('Internet Explorer 5 quirks mode');14                     break;15                 case  7:16                     alert('Internet Explorer 7 Standards mode');17                     break;18                 case 8:19                     alert('Internet Explorer 8 Standards mode');20                     break;21                 case 9:22                     alert('Internet Explorer 9 Standards mode');23                     break;24                 case 10:25                     alert('Internet Explorer 10 Standards mode');26                     break;27             }28 29         }30         detect();31     </script>32 </body>33 </html>

    S (標準モード)、A (標準モードに近い)、Q (混合モード)






    IE6 IE7 ?IE8 ?IE9 IE10 Chrome Firef サファリ オペラ
    Quriksモード はい はい はい はいはい はい はい はい はい
    ほぼ標準モード なし なし はい はい はい はい はい はい はい
    はい はい はい はい はい
    Doctype NS6 Old Moz Moz & Safari & Opera 10 & IE10 & HTML5 Opera 9.0 IE 8、IE 9 & Opera 9.5 IE 7 & Opera 7.10 IE 6 & Opera 7.0 Mac IE 5 Konq 3.2 e257e4739d0b8d427f1e3a44eed5aea6SSAAAAAAQQ SAAAAAQ86cb47e2dfb3daa40c02e6d345dd79b7SS SSSAAAA9a17fe03c27efb3cb3c7e4aa1c79c4b7SSSSSAAAS Q 52b189f45abba88b2989c5c1f30b7a34
    なし Q Q Q Q Q Q Q Q Q
    c36b9394b269fa8b40575f75d0792c12 Q S S S S A A A
    ed70a7798c0744d67ef0eadb4bf80f96 S S S S A A A A
    A ca84f1e74c0f052200ec6bb918857c54 S
    A A A A A A S S S S S A Q A Q
    52b189f45abba88b2989c5c1f30b7a34
    58c8b7865377282a0e95776aee8828ec    		 S S S S S A Q A Q
    cc2a3c708791b3c626d2b5fe40691168
    c4df56d3c58d941240d77d7f995c280f    		 S S S S S A Q A Q
    cc2a3c708791b3c626d2b5fe40691168
    f2bcdb9fb0517c628eda18e99294acc7    		 S S A A A A Q A Q
    Q S S Q Q Q Q Q Q
    Q S S S S A A A Q
    S S S Q Q Q Q Q Q
    S S S S S A A A Q

    PS：

    Opera文档モード：http://www .opera.com/docs/specs/doctype/

    Firefox文档モード：https://developer.mozilla.org/en-US/docs/Mozilla%27s_DOCTYPE_sniffing

    IE8：http://blogs.msdn.com/ b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx

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

    関連記事

    続きを見る