HTML5を使用したいけど、IE6〜IE8までは対応していません。 かといってそのまま放置してしまうと、古いIEでは見れないことになってしまいます。

もちろん新しいブラウザで見てもらえればそれでいいのですがそうも行かないので 古いIEでも最低限見れるようにするための方法をまとめました。

1.HTML5の新要素を対応させる

まずはHTML5から登場した新要素をIE6~8でも認識出来るようにする必要があります。 対応方法は以下の通りです。

JavaScriptで解決する

ひとつはJavaScriptで対応する方法。

<!--[if lt IE 9]
<script>
    document.createElement('header');
    document.createElement('section');
    /*必要な分だけ書く*/
</script>
![endif]-->

createElement()で()内の名前の要素を生成出来ます。 IE8以下に対応させたいので条件付きコメントで囲います。

html5shiv.jsというライブラリを使う

html5shiv.jsというライブラリを読み込むと、自動で要素を生成してくれるそうです。ありがたい。 下記のサイトからダウンロード出来ます。

html5shiv - HTML5 IE enabling script - Google Project Hosting

ダウンロードしたらあとはサイトで読み込むだけです。

<!--[if lt IE 9]
<script src="/js/html5shiv.js"></script>
![endif]-->

新しい要素にdisplay:○○○

新しく生成された要素はすべてdiplay:inline;の状態になるようです。 なので要素によってはdisplay:blockを指定してあげる必要があります。

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
    display:block;
}

まとめ

IE11がついにリリースされ年々シェアが減っているとはいえ、まだまだIE8のシェアは20%ほどある模様。

参考 IE11が急成長 - 11月ブラウザシェア | マイナビニュース
出来る限り新しいものは使っていきたいですがどこまで古いブラウザ対応するか しっかりと設計することが必要そうですね。