html5新增的header、footer、nav、section、article等语义化标签，能够让页面结构更清晰，也方便搜索引擎抓取内容，但旧版本浏览器由于内核发布时间早于html5标准，无法识别这些新标签，会出现标签被当作未知元素处理，默认以内联元素展示，设置的宽高、内外边距等样式全部失效的问题。处理这类兼容问题有多种成熟的方案，开发者可以根据项目的浏览器兼容要求选择使用。
方案一：通过JavaScript动态创建标签
旧版本浏览器无法识别html5新标签的核心原因是没有在内部注册这些标签，我们可以通过js在页面加载时动态创建对应的标签，浏览器就会将其识别为合法的html元素，进而支持对应的样式设置。
这种方式的实现逻辑很简单，只需要遍历需要兼容的标签列表，依次调用document.createElement方法创建标签即可，示例代码如下：
// 需要兼容的html5新标签列表
var html5Tags = ['header', 'footer', 'nav', 'section', 'article', 'aside', 'main'];
// 遍历列表创建标签
for (var i = 0; i < html5Tags.length; i++) {
document.createElement(html5Tags[i]);
}
需要注意的是，这段js代码需要放在head标签内，在页面渲染之前执行，否则浏览器已经完成了标签解析，再创建标签也无法生效。这种方式适合只需要兼容少量新标签、项目兼容要求不高的场景，但是如果标签数量多，手动维护列表会比较麻烦。
方案二：引入html5shiv兼容插件
html5shiv是目前最主流的html5标签兼容方案，它是一个专门解决旧版本浏览器html5标签识别问题的js库，内部已经包含了所有html5新标签的创建逻辑，不需要开发者手动维护标签列表。
使用html5shiv的方式非常简单，只需要在head标签内通过条件注释引入即可，条件注释可以保证只有IE9及以下版本的浏览器才会加载这个插件，不会影响其他现代浏览器的性能：
<!--[if lt IE 9]> <script src="https://ipipp.com/html5shiv.min.js"></script> <![endif]-->
html5shiv会自动处理所有html5新标签的兼容问题，不需要额外配置，兼容覆盖度也很高，大部分需要支持IE8及以下浏览器的项目都会选择这个方案。如果需要本地存放插件文件，也可以从官方渠道下载源码放到项目静态资源目录中引入。
方案三：使用polyfill兼容方案
如果项目中不仅使用了html5新标签，还用到了其他html5的新特性比如localStorage、canvas等，那么可以选择使用polyfill方案，polyfill是一组用于模拟新特性的js代码，能够让旧浏览器支持新的api和标签。
常用的polyfill库比如Modernizr，可以检测浏览器支持的特性，自动加载对应的兼容代码，也可以手动配置需要兼容的特性列表。不过polyfill的体积相对较大，如果只需要处理标签兼容，没必要引入完整的polyfill库，优先选择html5shiv即可。
不同方案的适用场景对比
为了帮助开发者选择合适的兼容方案，下面整理了三种方案的对比信息：
| 方案名称 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| JS动态创建标签 | 仅需兼容少量新标签，兼容要求低 | 无额外依赖，实现简单 | 需要手动维护标签列表，兼容覆盖不全 |
| html5shiv插件 | 需要兼容IE8及以下浏览器，仅需处理标签兼容 | 兼容覆盖全，配置简单，无多余功能 | 仅支持标签兼容，不支持其他html5特性 |
| polyfill方案 | 需要兼容多种html5新特性，包括标签、api等 | 兼容能力强，可定制需要兼容的特性 | 体积较大，配置相对复杂 |
注意事项
在处理html5新标签兼容时，还有几个细节需要注意：
- 所有兼容代码都需要放在
head标签内，在页面body渲染之前执行，否则无法生效。 - 如果项目中使用了css reset或者normalize.css，需要确保这些样式文件在兼容代码之后加载，避免兼容标签的默认样式被覆盖。
- 对于不需要兼容旧版本浏览器的项目，比如内部管理后台，可以直接使用html5新标签，不需要添加额外的兼容代码，减少不必要的资源加载。
提示：随着浏览器的更新迭代，目前主流浏览器都已经完整支持html5新标签，只有少数需要兼容老旧设备或者特定客户端的项目才需要处理这类兼容问题，新项目可以优先确认目标用户的浏览器使用情况，再决定是否添加兼容代码。