IE11でレイアウトが崩れたときの覚え書き

今、サイトをBaserCMSの上でTwitter Bootstrapで作っています。普段使っているChromeとFirefoxで確認しながら、ようやく完成というところでIE11で確認したところ、見事にレイアウトを崩れています。いつもの通り、このIEめが、とムッキーとなります。このままIEは非対応ということもできないので対応方法を探ります。

IEのF12で見ると、どういう訳か、

ヘッダー

が、

ヘッダー

なんてIEが勝手にしてくれます。ますますいらつきますので、何か手を考えなければいけません。F12のコンソールを見てみると、

HTML1202: http://hoge/ は、[イントラネット サイトを互換表示で表示する] がオンであるため、互換表示で実行中です。

と表示されています。今、テストしているサイトは、Vagrantで開発環境を作っているので、イントラネットなのでしょう。では互換表示をオフにするにはどうすればいいのでしょう。

そういえばIEは互換モードなんてありましたが、11ではその切り替えのアイコンがなくなっています。行き当たったサイトに書いているように、IE11の「ツール」メニューの「互換表示設定」で互換モードをオフすることができます。

ie11

これで見事にレイアウトの崩れが直っていました。まあ、本番サイトではイントラネットとはならないので、正常に表示されると思いますが、やはりIEには落とし穴があります。

以上の設定をしなくても、


を追加すればいいことも確認できましたが、IE12,13・・・になったらいちいち書き換えなければいけないの? となりますので、これは書かなくもいいでしょう。