スポンサーリンク

2013年5月1日水曜日

IEでの表示が崩れないようにするmetaタグ

新しい記事 以前の記事

BloggerブログにてIE表示でもレイアウトがくずれない様にする方法


Bloggerブログにて、
zenbackのファビコンと記事がIE表示だとズレてしまうのをずっと気になっていました。

なんとかならないものかと調べてみました。
ありました!!

修正する前の表示状態。

修正する前表示状態
修正する前表示状態
上記の様にzenbackのファビコンと記事がずれている状態です。


そこで、
検索して、
対処方法がありました。

他のBloggerブログの方も試行錯誤していたみたいです。

<参考サイト>
IE8のレンダリングモードに関するまとめ – SummerWind
このようにバージョン番号を指定することで、レンダリングに用いるモードをページ側が指定することができます。また「IE=edge」という値を用いると最新のレンダリングモードが選択されます。なお、複数のモー ...


IE8以降のバージョンでレンダリングモードをmeta要素で指定する時のまとめ | MJ-WAVE.COM
以前何かの案件でIE8での表示がIE7チックになってるって事があったので、meta要素を追加して難を逃れたわけですが、このmeta要素の記述について詳しく調べていなかったので、自分なりにまとめてみまし ...


Internet Explorer でレイアウトが崩れる Blogger テンプレートは、IE 7 互換モードのタグを削除してみるといいかも | クリボウの Blogger Tips
IE 互換モードの複数指定 BloggerのテンプレートのIE=EmulateIE7の対応について 【IE9】 | 某氏のたわごと NEXT で、IE 7 互換モードのタグを次のように変更する Ti ...

IE9 Blogger・Adsense・zenback の相性問題 解決編 - Jkun Blog
IE9 Blogger・Adsense・zenback の相性問題 : Jkun Blogの解決編… この問題に関して、とりあえず解決したのでメモしておく。 対処方法は以下の通り ...


[blogger]IE互換表示タグについての泣き言1つ。 - Sunabox
bloggerでは、標準で用意されているテンプレートがいくつかありますが、確認した限りでは、全てのテンプレートHTMLに

BloggerのテンプレートのIE=EmulateIE7の対応について 【IE9】
IE9からサポートされた(HTML5やCSS3)を使う場合に、この設定だと困る場合があります。で、この部分を消せばよいかというと、消すと明らかにIE8での表示の時におかしくなるものも中には存在します。 ...


ということで、

<解決法>

上記参考サイトにて様々な内容を拝見させて頂きましたが、
metaタグによる指定で解決できる模様です。

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

上記は、IE9までの対応方法。

以下は、最近IE10が出て来ましたのでIE10にての対応方法。
<meta content='IE=EmulateIE7; IE=EmulateIE9; IE=EmulateIE10' http-equiv='X-UA-Compatible'/>

しかし、
このようにバージョン番号を指定することで、レンダリングに用いるモードをページ側が指定することができます。また「IE=edge」という値を用いると最新のレンダリングモードが選択されます。なお、複数のモードを同時に選択した場合は新しい方のレンダリングモードが採用されるようです。
との事。

なので、
わざわざIEのバージョン指定をしなくても、
『IE=edge』にて、
常に最新バージョンのIEにてのレンダリングモードが指定可能なようです。

具体的に、どう記入するかというと、
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Bloggerブログでは、
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>

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

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

Bloggerブログにては、
<meta content='IE=Edge, chrome=1' http-equiv='X-UA-Compatible'/>

のmetaタグを挿入すると

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

のようです。

実際、私のBloggerブログにては、

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

を挿入した後の表示画面は、
metaタグでIE=edge挿入後
metaタグでIE=edge挿入後
綺麗にレイアウトが表示されました。

これから、IE10も多くのユーザーがupdateする中で、
常に最新のバージョンのIEのレンダリングモードでの表示が可能な
IE=edgeタグを用いたmetaタグを挿入しておくと良いと思います。


スポンサーリンク



スポンサーリンク

この記事が気に入ったらいいね!
お願いします(#^.^#)

↓↓↓

最新情報をお届けします

言えないことはTwitterで!!


こんな記事も書いてます



関連性の高い記事


0 コメント:

コメントを投稿

次の投稿 前の投稿 ホーム
Related Posts Plugin for WordPress, Blogger...