HTML5のIE8以下への対応内容例

JavaScript読み込み

IE8以下だけに読み込ませるという条件付きコメントと、IE10以上への対応

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<!--[if IE]>
<script src="［JavaScriptファイルパス］"></script>
<![endif]-->

　

JavaScriptの内容

document.createElement('article');
document.createElement('aside');
document.createElement('details');
document.createElement('figcaption');
document.createElement('figure');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('main');
document.createElement('nav');
document.createElement('section');
document.createElement('summary');
document.createElement('audio');
document.createElement('canvas');
document.createElement('progress');
document.createElement('video');
document.createElement('audio');
document.createElement('template');

　

JavaScriptのライブラリによる対応

上記の機能を持ったJavaScriptライブラリーを読み込むこで解決することもできる

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

　

cssの内容

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
  display: block;
}
audio,canvas,progress,video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],template {
  display: none;
}