クソッ！
IEのクソッ！！
失礼しました。
最近、Wordpressのテーマを作りました。
でもIEを考えてなかったので一応確認したら案の定レイアウトは崩れてます。
面倒くさいし、ブスだからインターネットエクスプローラーは無視しようと思ってたんですが、チラチラ|ω・｀)（←IE）こっちを見やがるから、
いやいやだけど対応させてみました。
ということで今回は、html5とcss3で作ったレスポンシブサイトを、
ブラウザ界のブスことInternetExplorerにも対応させてみようって話。
手を煩わせるんじゃないよ。まったく。
あんたかわいくないんだよ！
で、世間の方々を参考にしようと検索するとたくさん出て来ました。
[browser-shot width=”200″ url=”http://www.arch-web.jp/archives/771/” target=”_blank”]
IE8でも簡単にHTML5とCSS3に対応させる方法／アーチWeb制作室
[browser-shot width=”200″ url=”http://webmemo.biz/html5-css3″ target=”_blank”]
HTML5とCSS3をIE対応させるにはこの2つでいい？ブログを対応させる時に使った方法を書いたよ！／あかめ女子のwebメモ
などなど・・・。
どれも丁寧に説明されててわかり易かったんですが、なぜか自分の場合効かない。
なんで？ってことで、色々試した結果、以下のやり方でクリアできました。
自分みたいに効かない人もいるかもしれないので、私もこのブログに残しておきます。
ちなみにレスポンシブデザインでもOKでした。
やってみたIE対応方法
１．html5を有効できた「html5shiv」
1. html5shivをダンロードする
以前と設置方法が変わってます。
ダウンロード ⇒ html5shiv
2.ディレクトリに入れる
zipファイルを展開して、dist内にある【html5shiv.js】を任意のフォルダにアップロードします。
私は【js】フォルダの中にいれました。
3.＜head＞に読み込ませる。
で、＜head＞内に以下を追記します。
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
▶ Check！
html5shivとhtml5shiv-printshiv.jsとの違いは印刷時の機能サポートがあるかどうからしい。
サイトの表示としてはどちらも問題ないようです。
２．css3を有効にできた「respond.js」
css-mediaquries.jsではなくこちらを使いました。
1. respondをダンロードする
レスポンシブ・ウェブデザインでも対応させることができるjsです。
ダウンロード ⇒ scottjehl/Respond – GitHub
（サイト右にあります）
2.ディレクトリに入れる
これも同じように、zipファイルを展開して【respond.src.js】を任意のフォルダにアップロードします。
html5shivと同様に【js】フォルダの中にいれました。
ちなみにrespond.min.jsとの違いはわからなかったけど、どっちでも大丈夫だった（自分の場合）
※ 追記 コメントで教えて頂きました。。
minは圧縮されてるファイルらしいです！知らなかったな～ははは(^_^;)
「(´ー`)/~~」さん。ありがとうございます！
3.＜head＞に読み込ませる。
これも＜head＞内に記述が必要です。
<script src="js/respond.src.js"></script>
meta要素を追加
ここからが本題なんですが、
上の２つをやってみたけどうまくいきませんでした。
で、以前作ったものを真似てみようってことで、昔レスポンシブサイトを作ったときのを記述と比較。
そうそう。これを ↓ 忘れてた。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
これを記述。
早めに読み込ませる必要があるので、今回はtitleの上に書いてます。
結果・・・見事IE8/7にも対応！⊂（＾ω＾）⊃ ｾﾌｾﾌ!!
これは、IEのレンダリングが適用されるようにする記述で、IEで閲覧しててもGoogle Chrome Frameで表示してくれます。
詳しいことは・・・こちら
[browser-shot width=”200″ url=”http://www.ist-jo.in/archives/826″ target=”_blank”]
IE=edge はIEの最新のモードで表示させる記述です。
例えば IE＝7 とすればIE7の標準モードの表示となります。
まとめ
これと。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
これ。
<script src="js/respond.src.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv-printshiv.js"></script>
<![endif]-->
を＜head＞に記述しました。
１００％対応ってわけにはいきませんでしたが、自分の環境で確認してもレイアウト崩れもありません。
角丸も対応してるからこれでOKだと思います！
というかもうこれでよくね？！
やるだけのことはやったよ(´・ω・｀)
ということで、これまで色々やっても対応出来なかった人は、X-UA-Compatibleを追記してみると良いかも！
IE６？無視無視！
次作ることがあったらIEはもう考えないようにしよう。。
[ad#ad-post-bottom]
気分に任せて更新中 ε-(/･ω･)/ ﾄｫｰｯ!!
