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>
期待展示的效果如下:
但在 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>
显示效果如下:
既然元素默认都不支持,就更没有相关默认的样式了,所以我们还要加上一些重置样式如下:
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),在机械工程中的专业释义为垫片,比喻给那些老旧的浏览器加个垫片,让它们基本能用。