低版本IE兼容h5
低版本IE兼容h5
keywords：兼容IE;Polyfill;条件注释;
上下文
IE10以上浏览器较好的支持了h5语义化标签；在IE9浏览器中，需要把语义化标签都转换为块级元素；IE9以下版本，不能解析这些新标签，可以将h5新标签，通过document.createElement(tagName)创建出来；也可以通过条件注释+html5shiv的方式解决
常用方案
1.IE9浏览器
在IE9浏览器中，需要把语义化标签都转换为块级元素；
header, section, footer, aside, nav, main, article, figure {
display: block;
}
2.IE5~IE8浏览器
可以将h5新标签，通过document.createElement(tagName)创建出来
<script>
/*手动创建标签:默认的标签的类型都是行级元素，当设置标签样式时，首先需要将行级元素转换为块级元素，即设置display：block*/
document.createElement("header");
document.createElement("nav");
document.createElement("main");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
</script>
注意：Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式，所以也不怎么行呀。
3.Polyfill+条件注释让低版本ie兼容h5
1)Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。比如说 polyfill 可以让 IE7 使用 Silverlight 插件来模拟 HTML Canvas 元素的功能，或模拟 CSS 实现 rem 单位的支持；（MDN）
2)条件注释（Conditional comments）:IE5~IE9这5个版本的IE浏览器另外支持一种特殊的if条件注释，其基本格式为
<!--[if IE]> html语句 <![endif]-->;当条件满足时，就渲染注释内部代码，否则视为普通注释，常用的条件注释有：
<!--[if IE]>用于 IE <![endif]-->
<!--[if !IE]> 用于非 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--[if gt IE 6]>
<style>
body{
background:pink;
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<script type="text/javascript">
alert("用于 IE8 以下版本");
</script>
<![endif]-->
</head>
<body>
<!--[if gt IE 6]>
<h2>用于IE6以上版本浏览器</h2>
<![endif]-->
</body>
</html>
3)Polyfill+条件注释让低版本ie兼容h5
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
//使得低版本浏览器支持h5
</script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">
//使得低版本浏览器支持css3
</script>
<![endif]-->
参考文献：
[1]条件注释法
