IEの互換表示をさせないように、metaタグにX-UA-Compatibleの設定を使用しよう

制作会社に作ってもらったサイトをIEで見ると大きく崩れていたことがあり、どうやら勝手に互換表示がされ、IE7の表示になっていたことで思わぬ崩れが発生していた。ソースを見るとmetaタグのX-UA-Compatibleが設定されていなかったの原因でした。

X-UA-Compatibleが追加されたのはIE8の時なのでかなり前の話になり、IEで互換モードと呼ばれる機能です。
IE8で古いサイトを表示すると崩れてしまうことが多かったので、最新のIEでも古いサイトを崩れなく表示させるためのタグです。

今となっては、このタグは必要なのか？という疑問もチラホラ見ますが、必要かどうかは私にはわかりません。
身近でこのようなことが起こったことは確かなので、常に入れるようにしています。
metaタグに記述しておいて不具合を起こすことは無いので、常に入れておいて問題ないと思います。

X-UA-Compatibleの設定

metaタグをhead内に1行追加するだけです。
サイトがブラウザにレンダリングされる前に記述したほうがよいので、上の方に追加しましょう。

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

content=”IE=edge”と設定すると、IEの最新バージョンに対応します。

例えばIE=8を指定した場合は、ブラウザのバージョンは最新でもIE8の互換モードで表示されます。
バージョンを落として表示するということは無いとは思いますが…

IEで確認をしたときに、もしページが大きく崩れていたときは、互換表示がおかしくなっている可能性もあるので、X-UA-Compatibleの設定が入っているかどうか、この部分も確認しておきましょう。

今回の現象については普通に考えると、制作会社にIEも対応ブラウザとして発注してたため、IEによる崩れを見落とすことは無いと思うので、社内のイントラネットが悪さをしている可能性もありそうです。
(teratailにも同様に社内イントラネットを気にしている方がいました)