ふろしき Blog

インターネットビジネスの基本知識やWebテクノロジー、エンジニア組織論について、経験談を交えつつお話します

IE6〜9とIE10とでQuirksモードの動作が違う、どうすれば解決できるか?

古いWebコンテンツを動かすため、IE6からQuirksモードという機能が追加されました。QuirksモードはIE5の動作をエミュレートすることができる機能です。しかし、IE10からQuirksモードでもHTML5の機能が動作するよう仕様に修正が加えられたため、動作に違いが生じることがあります。
(※参考 : 相互運用可能な (HTML5) Quirks モード - Microsoft)

IE10ではこの問題に対応するため、無印の「Quirksモード」と「IE5 Quirksモード」と2種類のQuirksモードを提供しています。もし今まで利用できていた古いWebコンテンツが、IE10以降から正常に動作しなくなった場合、ドキュメントモードを「IE5 Quirksモード」へ切り替えるため、以下の手順を試して下さい。

  1. 互換表示ボタンの利用(ユーザ向け)
  2. 互換表示リストへの追加(ユーザ向け)
  3. X-UA-Compatibleを利用する(開発者向け)

1. 互換表示ボタンの利用(ユーザ向け)

元々Quirksモードで動作していたサイトでは、アドレスバーのすぐ右に「互換表示ボタン」が付いています。このボタンをクリックすると、QuirksモードはIE5 Quirksモードへ状態遷移します。

f:id:furoshiki0223:20131122001408p:plain

2. 互換表示リストへの追加(ユーザ向け)

以下の手順に従い、設定を試してみて下さい。

IEのウィンドウ右上にある「歯車アイコン」をクリックし、「互換表示設定(B)」をクリック。
f:id:furoshiki0223:20131111201907p:plain

ドメイン名を入力し、「追加」をクリック。
f:id:furoshiki0223:20131111202037p:plain

閉じるをクリックすると、IEは再びロードを開始し、古いレンダリングエンジンによる動作を開始します。IE11では、「互換表示設定」にて指定されたドメイン名(URL)のWebサイトは、「IE7」の動作を再現させます。

3. X-UA-Compatibleを利用する(開発者向け)

IE10では、X-UA-Compatibleの値を「IE=5」で指定すると、「IE5 quirksモード」が適用されます。

設定方法については、以下のページを確認して下さい。

>> IE10のX-UA-Compatibleの使い方/動作仕様

このブログの筆者について

川田 寛

株式会社メディアドゥのVP of Engineering。ネットでは「ふろしき」と呼ばれている。

2009年、新卒としてNTTグループにて仮想化技術・Web標準の研究と技術コンサルティングに従事。2015年よりピクシブ株式会社にて、Webエンジニア・エンジニアリングマネージャー・事業責任者・執行役員などを通じて、技術組織のデザインと技術系の新規事業に関わる。2021年12月より、現職へとジョイン。

ネット事業と技術組織は表裏一体!良いネット事業は良い技術組織から!日本のコンテンツを一つでも多く世界へ届けるべく、技術組織デザインと新規事業の二足の草鞋を履いて邁進中。

このブログでは、主に「インターネット事業のビジネス基本知識」「Webテクノロジーのトレンド」「エンジニア組織の設計手法」について、経験談を交えつつ解説していきます。私と話をしてみたいという方は、以下のフォームより気軽にご連絡ください。

お問い合わせフォーム
免責事項: 本ブログの発言は個人の見解であり、所属組織を代表するものではありません。