HTML5标签的兼容性解决方式 部分项目的要求是兼容低版本的IE浏览器,比如IE8之类的,但是项目中使用header、
nav等HTML5的标签,需要解决兼容。 查看what can i use 可以看到header等HTML5的标签 IE8等低版本浏览器不支持 使用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。 使用html5shiv库来兼容
分析:使用库来解决HTML5部分标签不兼容的问题,这里使用的是html5shiv。
这个库博主是在使用bootstrap3.x之前使用的时候接触的,当时也是为了兼容IE8等低版本浏览器能够使用bootstrap3.x。 综上:最好的方式是进行CSS Hack判断 if lte IE 8 才考虑引用库这样判断最好,为了更加优化。
所以,最终解决方式:
小提示: 使用CC:ie6 然后tab emmet快捷键 快速生成 CSS Hack 然后对应修改即可。