2012/10/10

IE10の標準モードでは条件付きコメントは無視される


Internet Explorer 10 の標準モードと Quirks モードでは、Internet Explorer の条件付きコメントが削除されたため、デフォルトの状態では条件付きコメントが動作しなくなりました。

相互運用性の向上と HTML5 準拠のため、Internet Explorer 10 の標準モードと Quirks モードでは、条件付きコメントのサポートが削除されました。 これは、条件付きコメントが、その他のブラウザーの場合と同様に、通常のコメントとして扱われることを意味します。

条件付きコメント

これはかなり影響の大きい仕様変更だと思います。特に、HTML5 対応しているサイトなどでは、Internet Explorer 用のライブラリを利用していたりしますが、そのライブラリを読み込めなくなるといった影響が考えられます。

 

Ineternet Explorer 10 では条件付きコメントが削除されてしまったので、条件付きコメントを動作させるには、Internet Explorer の後方互換機能を利用する必要があります。

 

検証

条件付きコメントを指定した場合の動作

以下の HTML を test.html という名前で作成します。

<html>
  <!--[if IE]>
    この内容は IE10 または他のブラウザでは無視される。<br/>
    IE9以前のバージョンでは正しく表示される。
  <![endif]-->
</html>

test.html を Windows 7 上の Ineternet Explorer 9 で表示すると、条件付きコメントの内容が正しく表示されます。

IE9

 

しかし、test.html を Windows 8 上の Internet Explorer 10 で表示すると条件付きコメントは無視されて何も表示されません。

IE10

 

後方互換機能を利用して条件付きコメントを指定した場合の動作

Internet Explorer の後方互換機能を利用して、Internet Explorer 9 として動作させると条件付きコメントは正しく動作します。

以下のように META タグで "X-UA-Compatible" に"IE=EmulateIE9"を指定します。ここでは、test2.html として保存します。

<html>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
  <!--[if IE]>
    この内容は IE10 または他のブラウザでは無視される。<br/>
    IE9以前のバージョンでは正しく表示される。
  <![endif]-->
</html>

test2.html を Windows 8 上の Internet Explorer 10 で表示させると、以下のように条件付きコメントが正しく動作していることが分かります。

IE10_2

 

上記の方法でも条件付きコメントを動作させることはできるのですが、HTML ファイル全てに META タグを指定するのは大変なので、HTTP ヘッダーで指定する方法も検証してみます。

以下のように、IIS の HTTP 応答ヘッダーの名前に"X-UA-Compatible"、値に"IE=EmulateIE9"を指定します。

IIS

 

この状態で、IIS の配下に META タグのない test.html を配置して表示すると以下のように条件付きコメントが正しく表示されます。

IE10_3

 

関連エントリー


スポンサーリンク


このエントリーをはてなブックマークに追加




Twitter ではブログにはない、いろんな情報を発信しています。


コメント

コメントを書く



プロフィール

  • 名前:fnya
    経歴:
    SE としての経験は15年以上。様々な言語と環境で業務系システム開発を行い、セキュリティ対策などもしていました。現在は趣味SE。

    Twitter では、ブログでは取り上げない情報も公開しています。


    ブログについて

    このブログは、IT、スマートフォン、タブレット、システム開発などに関するさまざまな話題を取り上げたり、雑感などをつづっています。

    現在、Enty で支援を受け付けています。もしよければご支援ください。



    >>ブログ詳細
    >>自作ツール
    >>運営サイト
    >>Windows 10 まとめ

    Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから