如何处理 HTML5 新标签的浏览器兼容问题
🌙
手机阅读
本文目录结构
支持 HTML5 新标签：
IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签；
浏览器支持新标签后，还需要添加标签默认的样式
JS 代码如下
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>
或者是直接循环方式创建标签：
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
CSS 样式设置默认样式：
<style>
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
display: block;
}
</style>
使用 html5shiv 框架
当然最好的方式是直接使用成熟的框架、使用最多的是 html5shiv 框架）：
Github: https://github.com/afarkas/html5shiv/
用到条件注释加 JS 代码实现
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
直接加入这一句代码就可实现兼容问题，关于条件注意中的 <!--if lt IE9>
是判断是否小于 IE9 以下浏览器，如果是就执行这段 JS 代码 ，如果不是，就忽略掉。
html5shiv 用起来还是很广泛的，可以放心使用
我一般在工作中是不管不支持 HTML5 的浏览器的，比如 IE678，如果真的需要兼容到 IE6 那里，我一般也就不用 HTML5 标签了，具体的自己根据实际情况来把握
推荐一个HTML和HTML5的速查，可以了解一下：HTML 速查表
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
