2011/03/03

HTML5の新要素を IE8以下を対応させる方法

HTML5が少しづつですが普及してきて日本の一般企業でも HTML5が利用されるようになってきました。ただ、その際に気になるのは IE です。IE6 はブラウザ対象から外れてきていますが、IE7, IE8 は対象から外すことはできません。しかしながら、IE7、IE8 は HTML5の新要素(nav, article, header, footer, section, hgroup)を認識することができません。そのため CSS が思った通りに表示されなかったりします。

どうしたら良いでしょうか?HTML5+CSS基礎講座で紹介している内容ですが抜粋してご紹介いたします。



これを解消するには JavaScript を利用します。イギリスのHTML5関連ブログ HTML5Doctor の筆者の一人でもある Remy SharpはIEにHTML5を対応する JavaScript を用意してくれています。

実査は至って簡単。下記の記述を head要素内に記述するだけです。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


出典元:
http://remysharp.com/2009/01/07/html5-enabling-script/

この JavaScript はプリント用にも対応していますので、IEで表示してプリンターで印刷という場合でも対応できます。
注意点として1つ。 </body>の前にこの JavaScript を記述はしないでください。正しく表示されなくなります。