4.11 Internet Explorer 8 の標準準拠
|
|||||||||||||||||||||||||||||||||||
.gif "Windows 7 Only"){kind=icon}
.gif "図 4-31: サイト側の設定とユーザー側の設定・操作")
.jpg "図 4-32: 互換表示でイントラネットサイトを表示する")
.jpg "図 4-33: 互換表示リストに追加")
.jpg "図 4-34: 互換表示ボタン")
.gif "図 4-35: IE 5 の描画モード")
.gif "図 4-36: IE 6 の描画モード")
.gif "図 4-37: IE 7 の描画モード")
.gif "図 4-38: IE の DTD 判別ロジック")
| DTD で判断される部分 | クアークス系 | 標準系 | |
| 適用される描画モード | クアークスモード | IE 7 標準 モード | IE 8 標準 モード |
| 対応 CSS | MS-CSS | 標準 CSS (IE 7) | 完全標準 CSS |
どの描画モードが適用されるかは、IE 7 と同様、まずは DTD によって決まります。つまり、ここでクアークスか標準かが決まります (図 4-39)。標準系だった場合、既定では IE 8 の標準モードで描画されます。そして、IE 7 の互換指定があった場合にのみ、IE 7 標準モードが使用されます。そのため、IE 8 標準モードで表示したときに問題があるページでは、IE 7 の互換指定をしなければなりません。
.gif "図 4-39: IE 8 の描画モード")
図 4-39: IE 8 の描画モード
ページのトップへ
X-UA-Compatible による IE 7 互換モードへの切り替え
IE 8 で IE 7 の互換モードで描画する必要があるときには、X-UA-Compatible 互換モードスイッチを指定します。この設定は、以下のいずれかの方法で設定します。
-
HTTP ヘッダーによる指定
HTTP ヘッダーに「X-UA-Compatible: IE = EmulateIE7」という値を含めます。この方法を使用すると、Web サイト単位やフォルダー単位など、まとめて互換モードスイッチの指定をすることができます。IIS の管理ツールを使用して以下の手順で設定します。
-
[コントロール パネル]－[システムとセキュリティ]－[管理ツール]－[インターネット インフォメーション サービス (IIS) マネージャー] を起動します。
-
設定したい Web サイトやフォルダーを選択し、[HTTP 応答ヘッダー] をダブルクリックします。
.jpg "図 4-40: IIS 管理ツール")
図 4-40: IIS 管理ツール
-
真ん中のペインを右クリックし、[追加] を選択します。
.jpg "図 4-41: HTTP 応答ヘッダー")
図 4-41: HTTP 応答ヘッダー
-
「カスタム HTTP 応答ヘッダーの追加」で、名前として「X-UA-Compatible」、値として「IE = EmurateIE7」を設定し、「OK」ボタンをクリックします。
.jpg "図 4-42: カスタム HTTP 応答ヘッダーの追加ダイアログ")
図 4-42: カスタム HTTP 応答ヘッダーの追加ダイアログ
IIS 管理ツールでの設定により、Web.config に以下のタグが追加されます。直接 Web.config にこの設定を追加してもかまいません。
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE = EmurateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
-
META タグによる指定
ファイル単位で設定をしたいなら、コンテンツ (HTML ファイル) に直接 以下のような META タグを追加する方法もあります。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
なお、HTTP ヘッダーによる指定と、META タグによる指定が同じコンテンツに対しておこなわれた場合は、META タグの設定値が優先されます。
ページのトップへ
X-UA-Compatible の設定値
X-UA-Compatible では、以下の表のような値を設定することができます。
| 値 | 適用されるモード |
| IE = 5 | クアークスモード |
| IE = 7 | IE 7 標準モード |
| IE = EmulateIE7 | IE 7 標準/クアークスモード (DTD によって切り替え) |
| IE = 8 | IE 8 標準モード |
| IE = EmulateIE8 | IE 8 標準/クアークスモード (DTD によって切り替え) |
| IE = edge | 最新モード |
「IE = EmulateIE7」は、「IE 7 と同様の動作をする」という意味です。つまり、DTD の設定によって標準モードかクアークスモードかが切り替わります。そのため、今まで IE 7 で表示できていたページは IE 8 でも表示できることになります。「IE = EmulateIE8」も同じです。DTD に依存することになります。
「IE = edge」は、最新モードで表示するための設定です。つまり、IE 8 であれば IE 8 の標準モードで、そして今後 IE の新しいバージョンがリリースされた場合には、その最新バージョンでで表示されることになります。
現在のモードを知るためには、document.documentMode プロパティを使用します。IE のアドレスバーに以下の JavaScript を入力すると、現在のプロパティ値を表示することができます。
javascript:alert(document.documentMode)
.jpg "図 4-43: documentMode プロパティの確認")
図 4-43: documentMode プロパティの確認
.jpg "図 4-44: documentMode プロパティの値表示")
図 4-44: documentMode プロパティの値表示
各モードの戻り値は以下の通りです。
| モード | 値 |
| クアークスモード | 5 |
| IE 7 標準モード | 7 |
| IE 8 標準モード | 8 |
ユーザー エージェント文字列は、Web サーバーにレポートされるブラウザーの ID です。Web アプリケーション開発者は、ユーザーエージェント文字列を使用して、クライアントが使用しているブラウザーの種類を検出することができるため、ブラウザーの種類ごとにコンテンツを変えたい場合に役立ちます。ユーザーエージェント文字列を表示するためには、navigator.userAgent プロパティを使用します。IE のアドレスバーに以下の JavaScript を入力することで確認できます。
javascript:alert(navigator.userAgent)
.jpg "図 4-45: userAgent プロパティの確認")
図 4-45: userAgent プロパティの確認
たとえば、IE 8 では、図 4-46 のようなユーザー エージェント文字列を渡します。
.jpg "図 4-46: IE 8 のユーザーエージェント文字列")
図 4-46: IE 8 のユーザーエージェント文字列
図 4-46 の「MSIE 8.0」はブラウザーのバージョンです。この値は IE 7 を使用している場合は「MSIE 7.0」です。また、IE 8 の IE 7 互換モードの場合にも同じく「MSIE 7.0」が返されます。これだと、本当の IE 7 なのか、互換モードの IE 7 なのかを区別することができません。そこで、役に立つのが「Trident/4.0」です。IE 8 の場合には、このユーザーエージェント文字列が追加されています。
ユーザーエージェント文字列の詳細は、以下のサイトをご覧ください。
ページのトップへ
段階的なサイト互換性の実現
Web サイトで IE 7 から IE 8 に移行する際には、図 4-47 のようなプロセスで実行します。
- IE 7 で表示できたページが IE 8 で表示できなくなってしまった場合、短期的な対応としては IE = EmurateIE7 を設定し互換性を保ちます。
- IE 8 のIE 7 互換モードで正しく表示されるかどうかをテストします。
- 将来的には、IE 8 標準に対応するようページを書き換えます。
- IE = EmurateIE8 を設定し、IE 8 標準モードで表示されるようにします。これが最終的な互換性問題の解決策です。
.gif "図 4-47: 段階的なサイトの互換性実現")
図 4-47: 段階的なサイトの互換性実現
ページのトップへ