针对旧版浏览器的HTML降级策略与Polyfill引入规范-html教程-PHP中文网

ie8及以下不识别html5语义标签，仅引入html5shiv不够，必须配合条件注释加载、置于head顶部、显式声明display:block，且表单属性和api需分别用js模拟或精准polyfill。

针对旧版浏览器的html降级策略与polyfill引入规范

旧版浏览器（IE6–IE11、Android 4.4 WebView 等）不支持 HTML5 新特性，不是加个 html5shiv 就能全兼容——必须分层处理：语义标签靠 document.createElement + CSS 重置，表单属性靠 JS 模拟，API 缺失则需精准 polyfill，且加载顺序和环境检测稍错一步就白干。

IE8 及以下不识别 `header`、`section` 等标签，只加 `html5shiv` 还不行

IE8 不会把 <header></header> 当 DOM 元素，CSS 中写 header { display: block; } 完全无效——因为选择器根本匹配不到节点。光调 document.createElement('header') 也不够，它只解决 DOM 创建，不解决渲染默认行为。

必须用条件注释只对 IE8- 加载 html5shiv，且放在最顶部、任何 CSS 和 JS 前：

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

CSS 中仍要显式声明：header, section, article, aside, nav, footer { display: block; } —— IE 默认把未知标签当 inline 元素
用了模块打包工具（如 Webpack），别 import 'html5shiv'，它依赖全局 document；改用 html5shiv-printshiv 并确保执行时机早于 HTML 解析

`required`、`placeholder` 在 IE9 以下压根不进 DOM，JS 模拟不能偷懒

这些是 HTML5 表单属性，IE9 及更早版本连 input.required 都是 undefined，html5shiv 对它们完全无感。不能靠 CSS 伪类（比如 ::placeholder）“假装修复”，IE8 根本不解析该规则。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

placeholder 要监听 focus/blur，动态插入/移除文本节点，且不能污染 input.value —— 否则提交时会把 placeholder 文本当真实值发出去
required 需在 submit 事件中手动遍历检查，调用 setCustomValidity() 或弹窗提示，不能只靠样式变色

推荐用 webshim 按需加载：

<script src="js-webshim/minified/polyfiller.js"></script><script>webshims.polyfill('forms');</script>

别调 webshims.polyfill('all')，体积大、加载慢、易冲突

fetch / Promise / `AbortController` 在 IE 全系缺失，Babel 转译毫无作用

fetch 是原生 API 缺失，不是语法问题，Babel 无法补上。IE11 支持部分 Promise，但不支持 Promise.allSettled；AbortController 则全系缺席。

whatwg-fetch 必须在所有业务代码前同步加载，不能加 async 或 defer，否则会报 fetch is not defined
whatwg-fetch 依赖 Promise，所以得先确保 window.Promise 存在 —— 推荐用 core-js/stable/promise，比 es6-promise 更贴近标准，且修复了 Edge 12–13 的 bug
whatwg-fetch 不实现 AbortSignal，如需取消请求，得额外引入 abortcontroller-polyfill 并手动对接
如果项目已用 axios，通常不用再加 fetch polyfill —— 它内部自动 fallback 到 XMLHttpRequest，但注意 withCredentials 默认为 false，而原生 fetch 默认不带凭据

`customElements.define()` 和 `<template></template>` 在 IE 中没有可靠 polyfill

IE 全系不支持 CustomElementRegistry，也没有 polyfill 能完整模拟其生命周期。哪怕用了 @webcomponents/webcomponentsjs，也只是让 Chrome 33+ 等旧现代浏览器可用，对 IE 完全无效。

别试图用 polyfill “硬撑” Web Components，降级为普通 DOM 操作更稳：用 document.createElement + innerHTML 替代 <template></template>，用 class 继承 + 手动挂载替代自定义元素
@webcomponents/webcomponentsjs 仅适用于 Chrome 33–60、Safari 10.1–12 等场景，对 IE 应直接跳过加载
如果必须用 <dialog></dialog>，IE 全系不支持，Edge 18 及以下也不支持 —— 降级为 div + aria-modal + 手动焦点管理

最容易被忽略的是 polyfill 的执行顺序和环境检测粒度：比如 whatwg-fetch 加载前没确认 Promise 是否存在，或多个 polyfill 同时定义 Promise 导致方法行为异常。这些细节不显眼，但一出错就是白屏或功能静默失效。