IEの互換モードでレイアウトが崩れる！？原因と解除方法
デザイン・コーディング

IEの互換モードでレイアウトが崩れる！？原因と解除方法

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

Web制作会社である弊社ITRAでは「新しいバージョンの Internet Explolor（IE）でテストサイトを見ているのに、Webレイアウトが崩れている。対処してもらえませんか？」というお問い合わせを受けることがあります。原因を調べていくと、Webサイトそのものに問題はなく、サイト閲覧者のIEの互換モードの設定がONになっているケースが非常に多いです。今回は、Web制作会社泣かせなIEの互換モードについてご紹介いたします。

ただし、IEはすでにマイクロソフトがサポートの終了を告知しています。IEを使い続けることのリスクについては過去の記事にまとめましたのでこちらをご覧ください。

IE

目次

  1. IEの互換モードとは
    1. IEの表示が崩れやすい理由のひとつが「互換モード」
  2. IEの互換モードを解除するには
    1. 互換モードの解除方法
    2. metaタグを利用した解除方法
    3. 旧バージョン対応をいつまで行うべきか？
  3. まとめ

IEの互換モードとは

IEの表示が崩れやすい理由のひとつが「互換モード」

Webの技術は国際標準化されていますが、著しいスピードで進化しており、ブラウザのバージョンアップが頻繁に行われています。しかし中には大企業のイントラサイトなど、大規模なシステムが入っていると、古い技術で構築されたものを長く使い続けなければならないケースがあります。

そこでIE８のリリース時に追加されたのが「互換モード（互換表示機能）」です。これは新しい機能を一部制限して、IE7と同じ古いレンダリングエンジンの状態に戻して見られるようにするというものです。

この旧バージョンへの配慮のための機能が、かえって悪さをする場合があります。特に現在のWebサイトは、CSS 3やJavaScriptを多用するのが主流であり、対応していないIE7ではそもそも表示できなかったり、レイアウトが崩れてしまうといったことが起こります。

IE11を使っているのにレイアウトが崩れるといった場合は、知らないうちにIEの互換モードがON（有効）状態になっていて、IE7で見ているのと同じことになっているかもしれません。特に、テストサイトがイントラ環境内にある場合など、イントラネットごと互換モードに指定されていることがあったりするので、要注意です。

IEの互換モードを解除するには

互換モードの解除方法

メニューバーで「ツール」＞「互換表示設定」を選ぶと、次のようなダイアログボックスが現れます。

ツールから互換表示設定
ダイアログボックス

「イントラネットサイトを互換表示で表示する」にチェックが入っている場合はチェックを外します。また、サイトごとに互換モードを使用するかしないかを選んで、「個人用互換表示リスト」に設定を保存しておくことができます。

また、IE8から10までなら、アドレスバーに「互換表示ボタン」が表示されていることもあります。青色で強調表示されている場合は、互換モードがON（有効）になっているという意味です。このボタンをクリックすると、閲覧中のWebサイトの互換モードをOFF（無効）にすることができます。

metaタグを利用した解除方法

もうひとつは、Webページの<head>内に<meta>タグで「X-UA-Compatible」と指定しておく方法です。Webサイト制作を行う弊社ITRAでは主にこちらの方法で、表示エラーが起こる問題を回避しています。

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

これによりIEは互換モードではなく、使用しているバージョンの標準モードで表示させることができるようになります。また、

  1. <meta http-equiv="X-UA-Compatible" content="IE=11">

と記述しておけば、IE11固定で表示させることができるようになります。

旧バージョン対応をいつまで行うべきか？

IE8、9、10はすでに正式サポートが終了していますし、IE11も2025年を目処に終了が予告されています（IE終了の記事へリンク）。IEユーザーのシェアはすでに約5％まで下がっているのですが、古いブラウザ対応のための制作コストを、いつまで負担し続けるべきでしょうか？　

そのような議論を社内的に提起するためにも、Web担当者はGoogle Analyticsなどを使って自社のWeb解析を行ない、ブラウザシェアの実態についても一度把握してみるべきでしょう。

まとめ

IEの互換モードについてご理解いただけたでしょうか？

Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したいけれどうちにはそんな時間も人材もないというお悩みはございませんか？

ITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。一人でお悩みにならず、まずはフォームでお気軽にお問い合わせください。

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

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。

初めて使う人にも使いやすく、セキュリティレベルの高いCMSパッケージ「iCMS」

詳しくはこちら
itra