IEブラウザの互換モード

4704 ワード

ブラウザ

IEブラウザの互換モード
回転:
http://ideas.spkcn.com/technology/web/201.html
互換性はウェブデザイナーにとって非常に重要です.どのウェブブラウザの特性や機能にも全く依存しないウェブサイトを作ったほうがいいですが、これは実現できない場合があります.ファイル互換モードは、ある特定のバージョンのIEにウェブページを制限することができる.
X-UA-Comptibleヘッダを使用してウェブページのサポートIEバージョンを指定することができ、document.documentModeを使用してウェブページの互換性を判定することができます.
特定のバージョンをサポートするIEを選択することで、今後のブラウザバージョンでもあなたのウェブページが一致することを確認することができます.
ウェブページの互換性モードを指定します.
ウェブページに互換モードを指定するには、X-UA-Comptible http-equivヘッダにmeta要素を使用する必要があります.以下の例は、ウェブページをIE 7対応モードに指定します.

<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  <title>My Web Page</title>
</head>
<body>
  <p>Content goes here.</p>
</body>
</html>

ウェブページの対応モードを検出します.
ウェブページのIE 8ブラウズ時のファイル互換性を検出するには、document ojectのdocumentMode属性を使用することができます.例えば、IE 8のアドレスバーに下記のコードを入力すると、現在のページの互換モードが表示されます.

javascript:alert(document.documentMode);

documentMode属性は現在のページ対応モードの値を返します.例えば、ウェブページがIE 8対応モードに指定されている場合、documentModeは「8」の値を返します.
IE 6の中のcomputMode属性はすでに高バージョンのIEによって破棄されており、IE 8＋の中で新しいdocumentMode属性に置き換えられている.現在はcomputModeを使ったアプリケーションもIE 8で動作しますが、documentModeを使用したものに更新します.
JavaScriptを使用してウェブページの互換性を判断したい場合は、以下の例の中の古いバージョンIEをサポートするコードを使用することができます.

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8
      engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // Assume quirks mode unless proven otherwise
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // standards mode
      }
   }
   // the engine variable now contains the document compatibility mode.
}

X-UA-Comppatible内容表記
IE=8:Web page supports IE 8 mode,which is also caled「IE 8 stands mode.」
IE=7:Web page supports IE 7 mode,which is also caled「IE 7 stands mode.」
IE=5:Web page supports IE 5 mode,which is also caled「quirks mode.」
IE=Emulties 8:If the Web page specifies a standars-based doctype directive,the page supports IE 8 mode;otherswise,it supports IE 5 mode(「quirks mode」)
IE=Emulties 7:If the Web page specifies a standars-based doctype directive,the page supports IE 7 mode;otherswise,it supports IE 5 mode(「quirks mode」)
IE=Edge:Web page supports the highest mode available to the version of Internet Explorer used to display the page.This option is generation for testing purposes.
各種互換モードコードの例:

<meta http-equiv="X-UA-Compatible" content="IE=5" />

Windows Internet Explorer 7を使ったQuirksモードのようですが、これはWindows Internet Explorer 5の表示内容と似ています.

<meta http-equiv="X-UA-Compatible" content="IE=7" />

ページが含まれていても大丈夫です.DOCTYPE指令は、Windows Internet Explorer 7の標準レンダリングモードを使用しています.

<meta http-equiv="X-UA-Compatible" content="IE=8" />

IE 8の標準レンダリングモードがオンされているが、自身X-UA-ComptibleファイルヘッダはIE 8以上のバージョンのみをサポートしているので、冗長コードと同じである.

<meta http-equiv="X-UA-Compatible" content="edge" />

EdgeモードはWindows Internet Explorerに最高レベルの利用可能なモードでコンテンツを表示するように通知していますが、これは実際には「ロック」モードを破壊しています.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

EmullateIE 7モードはWindows Internet Explorerに使用するように通知します.DOCTYPE>コマンドは、コンテンツの表示方法を決定します.標準モードコマンドはWindows Internet Explorer 7標準モードで表示されますが、QuirksモードコマンドはIE 5モードで表示されます.IE 7モードとは異なり、EmullateIE 7モードは＜に従う!DOCTYPE指令
注意:IEはウェブページの最初のX-UA-Comptibleヘッダのみを実行します.
複数の属性値を使用して、ウェブページ対応モードを指定することができます.これにより、ウェブページは将来のブラウザバージョンにおいて表示を一致させることができます.複数の互換モードを設定する必要がある場合は、セミコロンで各モードに分けます.
特定のバージョンのIEによってサポートされる対応可能な互換性モードが複数ある場合、ヘッダ属性の中で最も高い利用可能なモードが採用される.このようにすることは推奨されていないが、この特性を使用して特定の互換性モードを排除することができる.以下の例では、IE 7モードは除外される.

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" >

参考資料:MSDN：Defining Dcument Comptibility

JavaScript非同期呼び出しフレームを書く(Part 2-用例設計)