2016年5月19日

IEでテンプレート・レイアウトが崩れる。WordPressのCSSがうまく反映されない時。

スポンサードリンク

 Stinger5のテーマを使っているサイトは問題なし。
Stinger7をローカルで作っていて、IEで表示確認するとテンプレートが崩れました。

互換表示、の影響です。

IEの互換表示を止めてIE=edgeにする


 全然知らなかったのですが、
IEでサイトを表示する時、
IEのバージョンごとに表示が変わるそうです。

デフォルトで最新版になるようにして欲しいよと思いつつ。
古いバージョンのIEで表示を確かめたい人もいるのでしょう。


 で、互換表示モード、というのがあります。
古いバージョンで見ている人に合わせて表示してくれるとか。

IEは最新版を使う事が推奨されています。
なので、そうそう一般人が古いバージョンで見る事は無い?
と思うのです。


 では、この互換表示モードをさせないよう、
自分のブログやサイト側で設定してしまいましょう。

ヘッダーにIE互換表示モードをしないコードを記入


 header.php→

以下のコードを追加。
metaのコードがあるあたりに。


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


です。


IEの後に、

"chrome=1"

コードも足しても良いみたいです。

ChromeとIEでは少しコードが違いますね。
詳しくは分かりません。


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

こんな感じになりますね。


 私はIEのみでレイアウトが崩れていて、
Chromeでは問題なかったので、
IEのコードだけを記入しています。

Chromeは皆さんお使いのChromeにお任せしています。
表示にエラーがあったらお知らせ下さい。


参考にしたサイト

IEで「レイアウト崩れが起きてます」と言われた時の対処メモ(Internet Explorerの「互換表示モード」を解除する)
http://ozpa-h4.com/2015/03/12/ie-layout-false/


IEに互換表示をさせないX-UA-Compatibleの指定
http://www.loconoco.info/?p=665


 こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。


 当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。

必ずデータは最新のバックアップを取っておいて下さい。


 WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。

当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。

詳細はWordPressヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク