現在のサイトを解決する方法

  • [アーティクル]

注 : このドキュメントは暫定版であり、変更される場合があります。

新機能と既存の Web のサイト互換性をバランスよく配分することが、Windows Internet Explorer 開発の基本的な課題です。Windows Internet Explorer 8 では、レガシ標準から新しい標準への移行を簡素化する互換モードが導入されました。Windows Internet Explorer 8 の互換モードの詳細については、次のドキュメントを参照してください。

このドキュメントでは、Windows Internet Explorer 8 で適切にレンダリングされるようにサイトを修正するための必要な手順を説明しています。

簡便な解決策

Windows Internet Explorer 7 で正常に動作する既存の Web ページを維持し、Windows Internet Explorer 8 でも動作するように更新する場合は、なるべく修正の少ない方法が理想的です。それには、2 つの方法があります。一つは、互換モードの META タグを各ページに追加して、Windows Internet Explorer 8 でのページの表示を強制的に Windows Internet Explorer 7 と同様にする方法です。もう一つは、Web サーバーを制御する方法で、各 Web ページの META タグに相当するカスタム HTTP 応答ヘッダーの送信を Web サーバーに構成することにより、サーバーに互換性を自動追加できます。

各ページの変更方法

次の HTML META タグを各 Web ページの HEAD 要素に指定します (TITLE タグまたは META タグ以外のタグの前)。

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

これにより、Windows Internet Explorer 8 に対して、各ページを Windows Internet Explorer 7 と同様の方法でレンダリングするように通知が出され、Web サイトが修正されます。

サーバーに各ページの自動変更を構成する方法

各ページに HTML META タグと同じ互換性を自動的に追加するには、サーバーに次のヘッダーの送信を構成します。

X-UA-Compatible:IE=EmulateIE7

Microsoft Internet Information Services (IIS) 7.0 を構成するには、Web.config ファイルを次のように設定します。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
   <system.webServer>
      <httpProtocol>
         <customHeaders>
            <clear />
            <add name="X-UA-Compatible" value="IE=EmulateIE7" />
         </customHeaders>
      </httpProtocol>
   </system.webServer>
</configuration>

(変更を適用するディレクトリに Web.config ファイルを追加します。)

Web ページの実際のマークアップに存在する META 互換モードのスイッチ タグは、常に HTTP ヘッダー宣言に優先します。

IIS 6.0 などの Web サーバーにカスタム HTTP 応答ヘッダーの送信を構成する方法については、以下のドキュメントを参照してください。

これらの簡便な解決策は、あくまで一時的な応急処置として利用することをお勧めします。最終的には、Windows Internet Explorer 8 以上に標準ベースのコードを送信し、それより古いバージョンの Windows Internet Explorer にレガシ コードを送信するように Web サイトを変更する必要があります。

推奨される永続的な解決策

Windows Internet Explorer 7 で正常に動作する既存の Web ページを維持する場合には、Windows Internet Explorer 8 で正しく動作する標準ベースのページを作成して、レガシ ブラウザ バージョン用に特殊ケースの処理を追加する必要があります。新しい CSS 2.1 の機能をメイン ページ フローに追加したら、IE8 標準の互換モードを設定し、条件付きコメントを使用して Windows Internet Explorer のレガシ バージョンに対応する修正を記述する必要があります。

IE8 標準の互換モードを設定する

次の HTML META タグを各 Web ページの HEAD 要素の先頭に指定します (TITLE タグまたは META タグ以外のタグの前)。

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

これにより、Windows Internet Explorer 8 に対して、CSS 2.1 標準を使用してレンダリングするように通知されます。

前述のように、サイト全体に対して Web サーバーを構成することもできます。この場合、content の値を "IE=8" に変更するだけで済みます。ページレベルの META タグの変更はヘッダーの値より優先されるため、場合によってはページレベルのヘッダーを変更または削除する必要があります。

条件付きコメントを使用してレガシブラウザでのサイトの動作を維持する

次のコード例は、条件付きコメントを使用して Windows Internet Explorer の現在のバージョンまたはレガシ バージョンに CSS を指定する方法を示しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
   <head>
      <title>Test Page</title>
      <meta http-equiv="X-UA-Compatible" content="IE=8"/>
      <!--[if gte IE 8]>
      <style type="text/css">
      body {
       color: #0000ff;
       background-color: #000000;
      }
      </style>
      <![endif]-->
      <!--[if lt IE 8]>
      <style type="text/css">
      body {
       color: #000000;
       background-color: #ffffff;
      }
      </style>
      <![endif]-->
   </head>
   <body>
      <h1>
      <!--[if gte IE 8]>
      Chapter 1.
      <![endif]-->
      First Chapter
      </h1>
      <h1>
      <!--[if gte IE 8]>
      Chapter 2.
      <![endif]-->
      Second Chapter
      </h1>
      Text any version will see.
   </body>
</html>

ブラウザの検出方法については、以下のドキュメントを参照してください。

ここで説明した永続的な解決策は、最も推奨される Web サイトの修正方法です。これらの標準に従うことにより、サイトは Windows Internet Explorer のレガシ バージョン、Windows Internet Explorer 8、および今後リリースされる後継バージョンのいずれでも同じように適切に動作します。