HTML5とCSS3のIE8対策

HTML&CSS

制作課題の作品を夢中で作成しているとついつい自分の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」のダウンロード先

「PIE.htc」ファイルを任意のフォルダに置き、CSSに以下の記述をおこないます。
ポイントはCSS3を使用したセレクタ内に記述する事と、ファイルのパスはhtml側からのパスを記述する事です。

.radius{
    border-radius:5px;
    behavior: url("css/PIE.htc");
}

「PIE.htc」を使用した場合時々不具合が出る場合があります。
「PIE.htc」の不具合はこちらを参考にしてください。

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました