HTML转HTML5怎样处理旧浏览器_用polyfill补兼容性缺口【兼容】

IE8及以下版本不识别html5语义标签和css3选择器，需用html5shiv注册标签、selectivizr模拟选择器，并将polyfill同步置于head中优先加载。

src="https://img.php.cn/upload/article/001/503/042/176838487340675.jpg"alt="HTML转HTML5怎样处理旧浏览器_用polyfill补兼容性缺口【兼容】">

HTML5语义标签在IE8及更早版本直接不识别

IE8及以下版本根本不会把

、

、

这类标签当容器元素处理，CSS选择器header{display:block;}完全无效，dom中也查不到这些节点的样式盒模型。

必须用document.createElement()主动“注册”新标签，否则连基本渲染都做不到。现代polyfill如html5shiv就是干这个的：

• 不能用async>或延迟加载，必须同步执行且在中尽早载入
• 如果页面已用document.write动态插入HTML，html5shiv可能失效，需改用html5shiv-printshiv版本
• 仅解决标签识别问题，不提供、等功能回填

IE6–IE8里css3选择器（如:nth-child）根本解析不了

哪怕你写了article>p:nth-child(2n)，IE8会直接忽略整条规则，连降级到通用样式都不会触发。这不是优先级问题，是解析器压根不认识这个语法。

这时候得靠selectivizr配合一个jsCSS库（如IE7.js或jquery）来模拟行为：

立即学习“href="https://pan.quark.cn/s/cb6835dc7db1"style="text-decoration:underline!important;color:blue;font-weight:bolder;"rel="nofollow"target="_blank">前端免费学习笔记（深入）”；

src="https://code.jquery.com/jquery-1.12.4.min.js">

• selectivizr不支持CSS变量、@supports或自定义伪类
• 它会把每个匹配操作转成JS查询，性能明显下降，尤其DOM深或频繁重排时
• 如果用了innerHTML动态更新内容，新插入的元素不会自动应用选择器逻辑，需手动调用selectivizr.refresh()

HTML5表单验证API（checkValidity,setCustomValidity）在旧版IE全不可用

IE9才开始支持required、pattern等属性，IE8及以下连<inputtype="email">都当普通文本框处理，更别说form.checkValidity()这类方法了。

不能只靠polyfill补接口，得换思路：用JS做前置校验+样式反馈，并禁用原生提交行为：

if(!('checkValidity'indocument.createElement('form'))){document.addEventListener('submit',function(e){varform=e.target;varemail=form.querySelector('[type="email"]');varisValid=email&&/^[^s@]+@[^s@]+.[^s@]+$/.test(email.value);if(!isValid){e.preventDefault();email.classList.add('Error');email.focus();}});}

• 别试图给HTMLInputElement.prototype加checkValidity方法——IE8的DOM对象不是标准JS对象，无法安全扩展
• setCustomValidity的提示文案无法通过JS注入到原生气泡中，只能用title属性或额外class="tuc-19bc10f7-515d49-0 error tuc-19bc10f7-515d49-0">显示
• 移动端webview（如android4.3的webkit）也有类似限制，不能只测桌面IE

polyfill不是万能胶，加载顺序和执行时机错一点就白搭

很多项目把polyfill放在底部，或者等DOMContentLoaded后再加载，这时HTML已解析完毕，语义标签早就被当成未知内联元素处理完了，html5shiv再执行也晚了。

• 所有polyfill必须放在中，且在任何CSS和业务JS之前
• 避免用模块打包>工具（如webpack）自动提取vendorchunk——IE8不认识require.ensure或动态import()
• 若用构建流程压缩JS，请确认html5shiv的压缩版没删掉关键的document.createElement调用（有些Uglify配置会误删）

最麻烦的是混合环境：比如某页面用AngularJS1.x+IE8，不仅得补HTML5标签，还得确保ng-app初始化前polyfill已就位，否则指令编译阶段就找不到父容器。