Pages

2012-07-07

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

IE 互換モードの削除
IE10でさえbloggerのレイアウトがぶっこわれるからIEオワタなと思ってたら、bloggerのほうで全IEについてIE7相当の表示に変換するコードがあったみたい。rgba()が透過無しに変換されてる時点で気づいてましたしー;
そうそう、クリボウも気になってたんです、このタグ。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 のサポートを終了していますしね…。

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

Blogger の Internet Explorer 7 互換性モード   Blogger の Internet Explorer 7 互換性モード

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

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

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


IE 互換モードの複数指定

で、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 互換モードの複数指定」の項目を追記しました。

2 comments:

  1. http://jumperads.com.over-blog.com/2016/12/transfere-mecca
    http://jumperads.com.over-blog.com/2016/12/transfere-medina
    http://jumperads.com.over-blog.com/2016/12/cleaning-tanks-jeddah
    http://jumperads.com.over-blog.com/2016/12/transfere-dammam
    http://jumperads.com.over-blog.com/2016/12/jumperads.com.html

    ReplyDelete
  2. https://bucketlist.org/list/naklafshdmam/
    https://bucketlist.org/idea/1S24/jumperadscom/#.WIeDl7l97Z6
    https://bucketlist.org/idea/1S2M/%D8%B4%D8%B1%D9%83%D8%A9%20%D9%86%D9%82%D9%84%20%D8%A7%D8%AB%D8%A7%D8%AB%20%D8%A8%D8%AC%D8%AF%D8%A9/#.WIeEqLl97Z4
    https://bucketlist.org/idea/1S44/%D8%B4%D8%B1%D9%83%D8%A7%D8%AA%20%D8%AA%D9%86%D8%B8%D9%8A%D9%81%20%D8%A7%D9%84%D8%AE%D8%B2%D8%A7%D9%86%D8%A7%D8%AA%20%D8%A8%D8%A7%D9%84%D9%85%D8%AF%D9%8A%D9%86%D8%A9%20%D8%A7%D9%84%D9%85%D9%86%D9%88%D8%B1%D8%A9/
    https://bucketlist.org/idea/1SDK/%D8%B4%D8%B1%D9%83%D8%A7%D8%AA%20%D9%85%D9%83%D8%A7%D9%81%D8%AD%D8%A9%20%D8%AD%D8%B4%D8%B1%D8%A7%D8%AA/
    https://bucketlist.org/idea/1Tir/%D8%B4%D8%B1%D9%83%D8%A9%20%D8%AA%D9%86%D8%B8%D9%8A%D9%81%20%D9%81%D9%84%D9%84%20%D8%A8%D9%8A%D9%86%D8%A8%D8%B9/#.WIiVRrl97Z4

    ReplyDelete