Internet Explorer でレイアウトが崩れる Blogger テンプレートは、IE 7 互換モードのタグを削除してみるといいかも

IE 互換モードの削除

IE10でさえbloggerのレイアウトがぶっこわれるからIEオワタなと思ってたら、bloggerのほうで全IEについてIE7相当の表示に変換するコードがあったみたい。rgba()が透過無しに変換されてる時点で気づいてましたしー;

Twitter / hinoki__: IE10でさえbloggerのレ

そうそう、クリボウも気になってたんです、このタグ。Blogger 管理画面「テンプレート ＞ HTML の編集」と進むと、head 要素内の最初の方で出てきます。

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

Blogger ブログのテンプレートに標準的に入っているこのタグは、Internet Explorer（以下 IE） 8、IE 9、IE 10 でページを閲覧したときに、IE 7 で見た場合と同じように表示させるためのもの。

「IE 7 だと崩れなかったのに IE 8 以降ではレイアウトが崩れてしまう…」という場合には重宝する設定ですが、たいていはその逆で、HTML5 や CSS3 対応の新しいブラウザ向きに作られたテンプレートが、IE 7 互換モードでは正しく表示されなくなってしまいます。すでに Blogger 自体も Internet Explorer 7 のサポートを終了していますしね…。

• Blogger、モダンブラウザ以外のサポート停止へ | クリボウの Blogger Tips

だったらいっそのこと、この IE 7 互換モードのタグを削除してみてはどうだろう？と、このブログのテンプレートで試してみたのがこちら。

  

どちらも Windows 7、IE 9 で閲覧時のスクリーンショットです。左が標準で、右がタグ削除時。細かな違いですが、枠線のカーブや影が IE 7 互換モードでは無効になっていたのがわかると思います。

ということで、最新の IE、Chrome、Firefox で見比べたときに IE だけ表示が違う場合には、このタグを削除してみるといいかもしれません。影響が出るのは、IE 8、IE 9、IE 10 での閲覧時のみですし…。ぜひ一度お試しを。

ここまで書いてきて、こういう趣旨の記事をどこかで見たような…と探してみるとすぐに見つかりました。合わせてお読みください。

• BloggerをIEで開くと最新版でもIE7として表示されることによる問題 | DevAchieve

IE 互換モードの複数指定

• BloggerのテンプレートのIE=EmulateIE7の対応について 【IE9】 | 某氏のたわごと NEXT

で、IE 7 互換モードのタグを次のように変更する Tips が掲載されていました。

<meta content='IE=EmulateIE7; IE=EmulateIE9' http-equiv='X-UA-Compatible'/>

このタグを使うと、

IE9の時は、IE9モードで表示され、IE8の時はIE7モードで表示されます。

とのこと。HTML5 と CSS3 がジャンジャン使える IE 9 以降と、まだ使えない IE 8 両方のことを考えると、このタグに変更しておくのが今のところ一番いいのかもしれません。


更新情報：

• 2012-07-08 … 「IE 互換モードの複数指定」の項目を追記しました。