先日、コーディング作業中のウェブサイトをブラウザチェックしていたのですが、またInternet Explorer（以下IE）でレイアウト崩れが発生。

しかし、CSS等どこを確認してもおかしな点は見当たらず、加えて角丸やbox-shadowが適用されていない。
更におかしいのは、古いバージョンだけでなく最新バージョンでも崩れている・・・かなり困りました。

原因は互換表示モード

CSSやJavaScriptが原因ではないのでは・・・？と思い、更に調べてみたら、IEの互換表示モードが原因だという情報を見つけました。

IEで「レイアウト崩れが起きてます」と言われた時の対処メモ（Internet Explorerの「互換表示モード」を解除する） | OZPAの表4

こういった原因もあったんですね・・・IEおそろしい。
互換表示モードって必要あるのか非常に疑問です。
記事を参考に「X-UA-Compatible」というmetaタグを追加してみたいと思います。

X-UA-Compatibleの追加

以下のmetaタグをheadタグ内に追加。
cssとjsの読み込みが記述されている箇所より上に入力します。

追加後、リロードしてみたらスッキリレイアウト崩れが改善。
角丸やbox-shadow等も適用されてました。一安心。
今後は、この記述も必須になるのかな、と思います。
IEにはあんな手こんな手で振り回されっぱなしです。

まとめ

これまでCSSによるレイアウト崩れがIEではよくありましたが、今回のケースは初めてでした。
昔は、IE6に振り回されていましたが、最新のバージョンでもトラブルが起こるっていうのはちょっと勘弁ですね・・・。

今回使用した「X-UA-Compatible」に関しては、こちらに詳しく載っています。

IEに互換表示をさせないX-UA-Compatibleの指定 | loconoco