HTML5标签的兼容性解决方式

版权声明：转载请联系[email protected] https://blog.csdn.net/dongzhiliwansui/article/details/86560442

HTML5标签的兼容性解决方式

部分项目的要求是兼容低版本的IE浏览器，比如IE8之类的，但是项目中使用header、
nav等HTML5的标签，需要解决兼容。

查看what can i use 可以看到header等HTML5的标签 IE8等低版本浏览器不支持

1. 使用document.createElement(tag)来解决

document.createElement('header');

header {
	display: block;
}

分析： IE8等低版本浏览器不支持HTML5的部分标签，
IE8浏览器认为header标签是个用户自定义的标签，所以显示的时候不支持，
这里通过document.createElement(‘header’)明确告诉它 这里是创建的标签
然后 针对header标签 设置对应的CSS样式为display:block。

注意一个小细节： script不能放在HTML5标签的下方，应该放在HTML5标签 header之类的 前面才可以正常显示， 即使用HTML5标签之前需要先写上方的JavaScript。

2. 使用html5shiv库来兼容

 <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>

分析：使用库来解决HTML5部分标签不兼容的问题，这里使用的是html5shiv。
这个库博主是在使用bootstrap3.x之前使用的时候接触的，当时也是为了兼容IE8等低版本浏览器能够使用bootstrap3.x。

综上：最好的方式是进行CSS Hack判断 if lte IE 8 才考虑引用库这样判断最好，为了更加优化。

所以，最终解决方式：

<!--[if lte IE 8]>
		<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
	<![endif]-->

小提示: 使用CC:ie6 然后tab emmet快捷键 快速生成 CSS Hack 然后对应修改即可。