html5新增了很多语义化标签，比如header、footer、nav、section、article等，这些标签能让页面结构更清晰，也利于搜索引擎抓取，但在旧版本浏览器尤其是IE8及以下版本中，这些标签无法被识别，会被当作未知元素处理，默认不会应用样式，甚至会导致布局错乱。
html5新增标签兼容性问题的核心原因
旧版本浏览器的渲染引擎没有将html5新增标签纳入默认元素列表，因此无法识别这些标签的默认样式和语义，会将其作为内联元素处理，同时不会为这些标签应用默认的盒模型规则，这就导致我们给这些标签设置的宽高、内外边距等样式无法生效。
常见的兼容性设置方法
1. 使用JavaScript动态创建标签
旧版本浏览器虽然不认识html5新增标签，但支持通过JavaScript的document.createElement方法创建未知元素，创建之后浏览器就会识别这些标签，也就可以正常应用样式了。我们只需要在页面头部添加一段js代码，创建所有需要使用的html5新增标签即可。
// 需要兼容的html5新增标签列表
var html5Tags = ['header', 'footer', 'nav', 'section', 'article', 'aside', 'main', 'figure', 'figcaption'];
// 遍历列表创建标签
for (var i = 0; i < html5Tags.length; i++) {
document.createElement(html5Tags[i]);
}
注意这段代码需要放在<head>标签内，并且在样式代码之前执行，否则样式可能无法生效。同时还需要在css中给这些新增标签设置块级元素属性：
/* 给html5新增标签设置默认块级显示 */
header, footer, nav, section, article, aside, main, figure, figcaption {
display: block;
}
2. 引入html5shiv第三方插件
如果不想自己手写创建标签的代码，可以使用成熟的第三方兼容插件html5shiv，这个插件已经封装了所有html5新增标签的创建逻辑，还做了很多边界情况的处理，使用起来非常方便。我们只需要在<head>标签内引入该插件即可，注意要通过条件注释只在IE9以下浏览器加载，避免不必要的资源消耗。
<!--[if lt IE 9]> <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
引入插件之后，同样需要在css中给html5新增标签设置display: block属性，因为插件只是让浏览器识别标签，不会自动设置默认的块级显示规则。
3. 使用兼容的标签替代方案
如果项目需要兼容非常旧的浏览器，且不想引入额外的js代码，也可以选择用div配合类名的方式替代html5新增标签，比如用<div class="header"></div>替代<header></header>，这种方式兼容性最好，所有浏览器都支持，但会损失语义化的优势。
不同场景下的方案选择
如果项目只需要兼容IE9及以上浏览器，不需要做任何额外设置，这些浏览器已经原生支持html5新增标签。如果需要兼容IE8及以下浏览器，优先选择引入html5shiv插件，维护成本更低。如果是非常老的项目，对兼容性要求极高，也可以选择div替代方案。
注意事项
- 所有兼容性设置代码都要放在样式代码之前执行，否则样式无法生效
- css中必须给html5新增标签设置
display: block，否则标签会默认以内联元素展示 - 条件注释只有IE浏览器支持，其他浏览器会忽略其中的内容，不会额外加载资源