让 IE8 支持 HTML5 语义化标签

HTML5是 HTML 最新的修订版本，于2014年10月由万维网联盟（W3C）完成标准制定。而 IE8 面世时间为2009年3月19日，时间相差如此之大，所以 IE8 作为比较古老的浏览器，不支持 HTML 5 引入的语义化标签（如 header、nav、menu、section、article 等）也是很正常的。

默认情况下 IE8 对 HTML5 标签的处理

在 IE8 里面，未定义的标签——IE8 不认识所有新引入的 HTML5 标签，所以定义样式是不会生效。比如下面这段代码（抽取主要代码）：

<style>
  section { color: red; }
</style>

<section>
  hello world
</section>

期待展示的效果如下：

chrome

但在 IE8 中实际展示效果如下：

IE8

如何让 IE8 支持 HTML5 标签

虽然默认不支持，但是我们可以通过 JS 使用 document.createElement 来“欺骗” IE 的 CSS 引擎，让它知道某个标签的存在，具体做法如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 test</title>
  </head>
  <body>

    <script>
      document.createElement('section');
    </script>

    <style>
      section { color: red; }
    </style>

    <section>
      Hello!
    </section>

  </body>
</html>

显示效果如下：

IE_HTML5

既然元素默认都不支持，就更没有相关默认的样式了，所以我们还要加上一些重置样式如下：

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

借助 `html5shiv.js` 让 IE8 支持更多的 HTML5 特性

其实不只是 IE8 ， IE6-9、 Safari 4.x (以及 iPhone 3.x)、还有Firefox 3.x 等等，对 HTML5 的支持都不完善。所以有了一个库 html5shiv.js 来做统一处理，shiv 意为用作武器的小刀（实际上是一个拼写错误，应该为 shim），在机械工程中的专业释义为垫片，比喻给那些老旧的浏览器加个垫片，让它们基本能用。