制作課題の作品を夢中で作成しているとついつい自分のPC環境が標準になってしまいます。
自分がChromeだからChromeで表示されれば満足してしまいがちです。
これではIE対策を忘れてしまいす。IE8は2014年4月時点のデスクトップブラウザシェアの1位で20.9％です。
常に色々なブラウザで確認することが重要です。
今回はHTML5とCSS3のIE8対策を手軽に行う方法の紹介です。
HTML5を使用した場合のIE8以下対策
IE8以下はHTML5のタグに対応していません。そのためHTML5の新しいタグを認識できずにレイアウトが崩れます。
これに対応するには色々方法がありますが、html5shivを使用するのが手軽です。
html5shivを利用するにはライブラリが必要です。
html5shivのサイトからデータをダウンロードします。
使い方は「html5shiv.js」を当該ファイルと同じ階層に置いた場合は、使用したいページのhead内に以下を記述します。
<!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]-->
これでHTML5のタグを認識してくれるようになります。
CSS3を使用した場合のIE8以下対策
IE8以下は多くのCSS3に対応していません。
border-radius、box-shadow、linear-gradientを可能にする程度ですが、「PIE.htc」を使用すると手軽に解決できます。
「PIE.htc」ファイルを任意のフォルダに置き、CSSに以下の記述をおこないます。
ポイントはCSS3を使用したセレクタ内に記述する事と、ファイルのパスはhtml側からのパスを記述する事です。
.radius{
border-radius:5px;
behavior: url("css/PIE.htc");
}
「PIE.htc」を使用した場合時々不具合が出る場合があります。
「PIE.htc」の不具合はこちらを参考にしてください。
