html兼容旧浏览器的核心是通过polyfill补全javascript api和css行为，而非改变html标签本身；需用html5shiv使ie8识别语义标签并配合display:block样式，fetch等api需whatwg-fetch或polyfill.io，flexbox/grid等css特性须手动适配旧语法，降级策略优先于polyfill，确保html裸跑可用。

HTML本身没有“polyfill”概念，真正要抹平的是JavaScript API和CSS行为的鸿沟。所谓兼容旧浏览器，核心不是让HTML标签变“新”，而是让依赖这些标签的新API、新语法、新布局能力，在旧环境里能跑起来——这靠的是精准引入polyfill、合理降级、以及结构兜底。

语义标签得先“被看见”，再谈样式与交互

IE8及更早版本压根不解析

这类标签，DOM里根本没节点，CSS写header { display: block; }也无效。光靠CSS不行，光靠document.createElement('header')也不够。

• 必须在最顶部、任何样式或脚本加载前，用条件注释只给IE8-引入html5shiv：<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->
• 同时必须显式声明样式：article, aside, footer, header, main, nav, section { display: block; }，这段CSS要放在所有自定义样式之前
• 注意：html5shiv只解决“渲染存在”，不解决ARIA语义支持，屏幕阅读器仍可能忽略
  这类写法

关键API缺失，得用对应polyfill按需补上

fetch、Promise、classList、IntersectionObserver这些不是语法问题，Babel转译不了，必须靠运行时模拟。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

• fetch全IE缺席：推荐whatwg-fetch，但必须放在所有业务脚本最前面加载，禁用async或defer，否则会报fetch is not defined
• Polyfill.io是更轻量的选择：用<script src="https://polyfill.io/v3/polyfill.min.js?features=fetch,Promise,Element.prototype.classList"></script>，它根据User-Agent动态返回缺失部分，Chrome可能返回空，IE11则带完整实现
• Canvas.toBlob不支持IE10+？用canvas-toBlob库，它纯JS实现数据流转，不依赖原生API，上传或本地保存场景可直接替换

布局与CSS特性不能只靠autoprefixer

autoprefixer只加前缀，不解决“有无”问题。IE10–11的Flexbox是旧草案语法，Safari 13.1以下不支持aspect-ratio，position: sticky在iOS Safari需JS模拟——这些都不是加-webkit-能搞定的。

• Flexbox兼容：Autoprefixer需配置browserslist: ["ie >= 10"]，并手动补全旧属性，如display: -ms-flexbox; -ms-flex-pack: center;
• Grid布局在IE中行为差异太大，autoprefixer默认不生成-ms-grid，建议基础层用float/inline-block，增强层才用Grid
• sticky定位可用stickybits或ismobilejs，它们监听滚动、动态计算top值，比纯CSS更可控

降级策略比polyfill更重要

polyfill是锦上添花，结构和流程兜底才是底线。一个表单没有action和method，JS提交失败就彻底卡死；nav里用div拼菜单，IE11键盘Tab无法聚焦链接。

• HTML必须裸跑可用：去掉CSS和JS后，页面仍能读、能导航、能提交。这是渐进增强的起点，不是加分项
• 避免伪元素承载关键信息：::before在IE11不渲染，屏幕阅读器也读不到，图文核心内容必须写在HTML里
• 图片alt不能为空，若承载关键信息，alt中要完整描述，或在邻近<p></p>中重复说明
• @supports不是浏览器开关，而是能力检测开关。别写@supports (display: grid) { ... }重排整个布局，应限定在微调间距、对齐等不影响流的属性上

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！