HTML5标签旧浏览器兼容：createElement与HTML5shiv方案

做前端最磨人的不是新特性怎么写，而是新特性到了旧浏览器里突然“不认识了”。早两年接一个政府类老项目，页面结构已经用上了header、footer、section，Chrome里一切正常，结果旁边一台装了IE8的老机器一打开，整个页面像是被扒了一层皮——所有区块挤在一起，背景色、间距全部失效，文字贴着文字，根本没法看。

排查到最后才发现，问题居然出在HTML5新标签本身。旧浏览器的解析器认不出这些标签，把它们当“未知元素”处理，样式自然就全乱了。这篇文章就把我踩过的坑、验证过的降级方案完整梳理一遍，从原理到实操代码再到排查技巧，给还要做兼容性改造的前端朋友一个可以直接抄作业的参考。

1. 为什么HTML5新标签在旧浏览器里会失效：真实原因与症状

1.1 问题的本质：浏览器不认识新标签

HTML5新增了一批语义化标签，包括header、footer、nav、article、section、aside、main、figure、figcaption、mark、time，还有audio、video、canvas这一批多媒体和绘图标签。现代浏览器从出生那天就认识它们，但在IE6、IE7、IE8这批老旧浏览器里，内置的HTML解析器用的是固定词表，遇到不认识的标签，不会直接报错，而是把它当作一个“未知元素”塞进DOM树。

这个“未知元素”看起来好像没出什么大事，实际上一连串问题接着就来。第一，CSS选择器匹配异常。因为浏览器压根不知道这个元素该是什么显示类型，默认全部按inline处理。第二，DOM操作异常。有些老浏览器里，用class或id通过getElementById能取到节点，但用getElementsByTagName去查header、article这类标签，返回结果却是空的。第三，在怪异模式下情况更糟，标签连DOM树都可能进得不利索。

我习惯用一个类比跟团队新人解释这件事：你把新标签想成刚成立的部门，老公司的人事系统里根本没有这个部门的档案编号。发工资（样式）找不到人，走流程（DOM查询）也找不到人。所以要让老系统“认识”新部门，就得有人去人事部把档案先补上。

1.2 典型症状：样式丢失、DOM查询异常、动态插入失效

实际开发里遇到的情况基本逃不出下面这几类：

• 页面打开后，header、footer、section区域的背景色、高度、内外边距全部失效，所有内容像流水一样往下淌。
• 用JavaScript获取元素，document.getElementById能拿到节点，但document.getElementsByTagName('header')在IE8里返回空集合。
• 动态创建的HTML5标签元素，设置className和行内样式后完全不生效。
• 页面没写DOCTYPE，或者写了但浏览器跑在怪异模式下，以上问题会被放大。

这些症状里面，最坑的是第二种。因为有些业务代码会用getElementsByTagName来统计元素数量、绑定事件或改变样式，一旦这个查询方法返回空，后续逻辑全部静默失败，排查起来特别费劲。我当时是翻到一段老代码，用tagName去判断元素类型，结果进IE8永远走不进那个分支，才意识到问题出在“标签认知”这一层。

1.3 兼容性现状：到底哪些浏览器不认得这些标签

搞清楚范围内哪些浏览器是“重点照顾对象”，才能决定方案做多重。

IE9是个分水岭。从IE9开始，header、footer这类语义标签已经能被正确识别和渲染，所以主要的兼容工