htmlcss IE11 のエミュレーション

2013年11月28日

IE10 では、開発者ツール(F12)のドキュメントモードでバージョンを選ぶとエミュレーションしてくれていたが、IE11 では、バージョンを選択しただけでは正しく表示されない。

IE11 の開発者ツール(F12)

IE11 の開発者ツール(F12)

検索したところ、以下の記事を見つけたので参考にさせていただいた。

新しい開発者ツールでは、タグで X-UA-Compatible を設定して、開発者が指定しなければならないとのこと。具体的にはHTMLファイルの Head 要素内に以下の様な meta タグを入れる。

<!--&#91;if IE&#93;>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<!&#91;endif&#93;-->

確認後は削除しなければならないので、以下でも同じ。

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

また、レスポンシブデザインで以下のように「respond.min.js」を使っているとこれも変更しないと適用されない。

<!--&#91;if lt IE 9&#93;>
<script src="../../js/respond.min.js"></script>
<!&#91;endif&#93;-->

変更後 [if lt IE 9]を[if IE]に変更

<!--&#91;if IE&#93;>
<script src="../../js/respond.min.js"></script>
<!&#91;endif&#93;-->

これで何とかそれなりに表示される。しかし、確認後はこれらを元に戻す必要があるので面倒くさい。