Paroday

Paroday：ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか？　yes

FC2ブログでIE9の機能（HTML5やCSS3）を使う方法

  1. あ、管だ
  2. イラッ
  3. 原子力ほわんい…保安院からの説明では……
  4. イラッイラッ
  5. 管だけが頼り、プレッシャーカンファレンス

　IE9 - 2011年4月26日（火）午前0時よりIE9日本語版リリース

X-UA-Compatible : IE=EmulateIE7

　FC2ブログは昨年から、レスポンスヘッダでIE=EmulateIE7を指定しているため、そのままの状態では、IE9で閲覧してもIE9でサポートしているHTML5やCSS3などの機能を使うことができません。

　IE9の機能を有効にするには使用しているテンプレートHTMLの <head> 直後に以下のコードを追加する必要があります。documentMode（ドキュメントモード）を9にします。

<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />

　テンプレートがXHTMLでない場合は閉じタグは不要です。

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

　追加する場所はhead要素内ですが、他のstyleやlink要素などの前に入れないと、反映されないことがあるかもしれません。また、IE9を指定することで、利用しているテンプレートによってはデザインに影響がでる可能性があります。

FC2ブログにおけるIE8とIE9のモード別表示確認

» 各モードの表示サンプルページ

　IE9から対応した border-radius（角丸） と
　IE8から対応した list-style-type の decimal-leading-zero（0付き番号） を例にあげます。

<ol id="FC2BLOGcontent">
 <li>あ</li>
 <li>い</li>
 <li>う</li>
</ol>
#FC2BLOGcontent {
 margin: 1em;
 padding: 1em 40px;
 background: #e6f6ff;
 border: 1px #bdd3df solid;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 list-style-type: decimal-leading-zero;
}
#FC2BLOGcontent li {
 list-style-type: decimal-leading-zero;
}
デフォルト（何も指定していない状態）

　HTTPレスポンスヘッダの X-UA-Compatible : IE=EmulateIE7 が適用されるため、IE8とIE9はEmulateIE7のレンダリングモードで表示されます。

閲覧表示モードradiuszero
IE 9IE7無効無効
IE 8IE7無効無効
IE=8
<meta http-equiv="X-UA-Compatible" content="IE=8" />

　IE8とIE9はIE8のレンダリングモードで表示されます。

閲覧表示モードradiuszero
IE9IE8無効有効
IE8IE8無効有効
IE=9
<meta http-equiv="X-UA-Compatible" content="IE=9" />

　IE8はIE9のモードを使用できないため、下位の IE8 のレンダリングモードで表示されます。
　IE9はIE9のレンダリングモードで表示されます。

閲覧表示モードradiuszero
IE9IE9有効有効
IE8IE8無効有効
IE=edge
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

　IE8はIE8における最新のレンダリングモード（IE8）で表示されます。
　IE9はIE9における最新のレンダリングモード（IE9）で表示されます。

閲覧表示モードradiuszero
IE9IE9有効有効
IE8IE8無効有効

　表示ブラウザにおける最新のレンダリングモードが適用され、IE10などがリリースされても対応できますが、最新バージョンではデザインが崩れたり、動作がおかしくなってしまう事態も想定されるので、少なくとも確認できる正式版のバージョンを指定するようにした方が無難かもしれません。

　今後のリリースにもよると思いますが、9以上の数値を指定しても、そのブラウザの最新のレンダリングモード（その数値に最も近いモード）で表示されます。

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

備考

　FC2がレスポンスヘッダの指定を外せば、テンプレートでIE9を指定する必要はありませんが、互換表示設定（マイクロソフト互換サイト一覧にfc2は含まれる）によって、自動的にIE9以外のdocumentModeが適用されてしまう可能性もあるため、IE8以降での閲覧を要求する場合は、テンプレートのmeta要素で指定する必要があります。

　documentModeの指定はIE8以降で有効です。ブラウザがIE7以下の場合（undefined）は特に影響はありません。

　ブラウザのツールバーに互換表示ボタンを表示させるためには、レスポンスヘッダやmeta要素からdocumentModeの指定を外す必要があります。

　FC2ブログリクエスト（要望）は、レスポンスヘッダでの描画モードの指定についてで出ています。公式テンプレートやプラグイン、FC2サービス提供のブログパーツなどで、IE7を指定しないと、正常に表示できないものもあるかもしれません。

関連記事
  1. comment

  2. うう 2012-08-31 03:41 No.1393 #-URL

    <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ja"> <![endif]-->
    <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="ja"> <![endif]-->
    <!--[if IE 8]> <html class="no-js lt-ie9" lang="ja"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->

    のようにmetaタグより前にドキュメントモードでの条件分岐を使用すると
    metaタグよりヘッダーのX-UA-Compatibleが優先されるのですね。
    不便だ…。

  3. bp43 2013-02-09 23:28 No.1755 #-URL

    InternetExplore9での、オンライン表示時のみの表示崩れ、こちらを参考に解決できました。ありがとうございます。

  4. hige 2015-01-20 17:51 No.4575 #GxAO5jdMURLhttp://blgid1974.blog13.fc2.com/

    ありがとうございます。
    このコメントの投稿時のIEはもう12です。
    私が使ってるテンプレが古いのでしょう。これを適用してIEでの表示がFFと同じになりました。

  5. ｈｉｇｅ 2015-01-21 11:20 No.4578 #GxAO5jdMURL

    IEは11の間違いでした。

コメント

Icon ※必須 :
Pass 　※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

https://paro2day.blog.fc2.com/tb.php/695-ec06dbc6

  1. trackback

  2. fc2ブログでIEのCSS3が効かない件　-　サニティノート

    これだ!! CSS3でスタイルシートを書いていて、box-shadowなんかがFirefoxでは適用されているのにIEで確認すると全然うんともすんとも効いていないorz いったい何が原因??!とジタバタしました 2012.10.22