MJ-WAVE.COM

  1. MJ-WAVE.COM
  2. Web開発
  3. IE8以降のバージョンでレンダリングモードをmeta要素で指定する時のまとめ

IE8以降のバージョンでレンダリングモードをmeta要素で指定する時のまとめ

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

以前何かの案件でIE8での表示がIE7チックになってるって事があったので、meta要素を追加して難を逃れたわけですが、このmeta要素の記述について詳しく調べていなかったので、自分なりにまとめてみました。ちなみにその時に追記したmeta要素は以下。

<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">

上記meta要素はIE8以上のブラウザの時にレンダリングモードを指定するものなんですが、他にもレンダリングモードを決定する条件があるんですが、これを書けばCSSで言う「!important」みたいな感じで確実に指定されるので他の条件は省きます(というか把握してません・・)。

レンダリングモード指定の種類
content属性の値はいくつか指定があります。

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

最新のモードを使用。IE8の場合はIE8のレンダリングモード、IE9の場合はIE9のレンダリングモードというように指定されます。基本的にはこれでOKなはずです。

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

IE8だろうがIE9だろうが、レンダリングモードはIE8を使用するというもったいない指定です。

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

IE8だろうがIE9だろうが、レンダリングモードはIE7を使用するという信じられない指定です。

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

IE8だろうがIE9だろうが、レンダリングモードはIE5(Quirkモード)を使用するという衝撃的な指定です。

他にもmeta要素+特定の条件でレンダリングモードが変わるという不思議な指定もあります。

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

という2つの指定方法ですが、下記条件にマッチするとQuirksモードが適用されます。

  • DOCTYPE宣言を記述していない場合
  • HTML3.0以前の構文を使用している場合
  • HTML4.0 Transitional もしくは Frameset でDOCTYPE宣言を記述していて、なおかつ宣言内にURLを含んでいない場合

上記に当てはまらない場合は、

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

ではIE8準拠モードが適用され、

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

ではIE7準拠モードが適用されます。

また追加でIEのプラグインでChrome Frameというものがありますが、そのChrome Frameのレンダリングモードを使用する場合は、

<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">

とするとプラグインのレンダリングモードを使用できます。そうするとどうなるかというと、簡単に言えばIE6がChromeになり、HTML5やCSS3も使えるようになります。
Googleは上記プラグインのインストールを促す公式のJavaScriptを提供しているので、全ての旧IEに入るようにアナウンスしちゃうのもアリですかね。

注意点

上記meta要素はCSS読み込みのlink要素やJavaScript読み込みのscript要素より前に書かないと適用されない場合があるので、注意ですよ。

ってかIEめんどくせっ!!!

もし、この記事が役に立ったらシェアしてくださいね!

ツイート
このエントリーをはてなブックマークに追加
タグ
, ,
カテゴリ

RECOMMEND BOOKS 筆者オススメ!! この記事に関連する書籍一覧

HTML5基礎

HTML5基礎

WINGSプロジェクト 片渕彼富

サンプルが豊富で、実践しつつHTML5の凄さを知ることができる本。触りながら覚えていくタイプの本なので、HTML5初心者の方におすすめしたい一冊です。

¥2,980(税込)

徹底解説 HTML5マークアップガイドブック 最終草案対応版―全要素・全属性完全収録

徹底解説 HTML5マークアップガイドブック 最終草案対応版―全要素・全属性完全収録

羽田野 太巳

HTML5での全要素、全属性のセマンティックなマークアップ方法がメインの書籍です。HTML5でサイトを制作する上で知っておかなければいけない情報が満載です。

¥3,150(税込)

HTML5入門

HTML5入門

Mark Pilgrim

オライリーのHTML5入門本。入門と言ってもHTML5触ってる人も読んで損はない本。サイト制作というよりもアプリ開発向け。

¥2,415(税込)

HTML5 開発ポケットリファレンス

HTML5 開発ポケットリファレンス

WINGSプロジェクト

HTML5でWebアプリを開発する上でとても役に立つポケットサイズの本。逆引きなので「これがやりたいけど、どうしたら?」って時に超便利。そして情報量が超豊富。

¥2,709(税込)

CSS3 スタンダード・デザインガイド

CSS3 スタンダード・デザインガイド

エ・ビスコム・テック・ラボ

タイトル通りCSS3についての本の中で「スタンダード」となりそうな本。定番から草案のプロパティ、ブラウザ独自プロパティ等、かなりの情報が網羅されてます。CSS3について知りたければこの本さえあれば正直いいかも。

¥2,940(税込)

CSS3デザインブック 仕事で絶対に使うプロのテクニック

CSS3デザインブック 仕事で絶対に使うプロのテクニック

MdN編集部

実践的な内容がメインです。「こうしたい時はこう」みたいな応用方法が載ってます。実践ノウハウが盛り込まれているので「なるほど!」と思える部分がいっぱいです。

¥2,940(税込)