HTML和HTML5兼容性差别在哪_不同浏览器支持度揭秘【对比】

HTML5兼容性本质是特性可用性差异，现代浏览器基本支持核心特性，旧环境（如IE9–11）需DOCTYPE声明、html5shiv、polyfill等补救措施。

HTML 和 HTML5 的兼容性差别，本质不是“能不能打开”，而是“哪些特性能用、哪些会静默失效、哪些需要额外补救”。现代浏览器（Chrome 120+、Firefox 125+、Edge 122+、Safari 17+）对 HTML5 核心特性已基本无感支持；真正的问题集中在旧环境——尤其是 IE9–IE11 和部分国产双内核浏览器的兼容模式下。

DOCTYPE 声明决定渲染模式，不是可有可无的装饰

浏览器看到 才启用标准模式解析 HTML5；若漏写、写错（如 ），哪怕只用

或 ，IE9+ 也会退回到怪异模式，导致盒模型错乱、CSS 选择器失效、甚至 document.querySelector 返回 null。

• 必须放在文件第一行，前面不能有任何空格、注释或 BOM 字符
• 大小写不敏感，但统一用小写更稳妥： 也合法
• 旧项目迁移时，先检查服务器是否在响应头里注入了 X-UA-Compatible: IE=EmulateIE7 类配置，它会强行覆盖 DOCTYPE

语义标签在 IE8 及以下直接不可识别

、、

这些标签在 IE8 及更早版本中不是“样式不好看”，而是根本不会被解析为元素节点：DOM 中查不到，CSS 选不到，JS document.createElement 也不起作用。

• 必须引入 html5shiv（或 html5.js）：仅需在 中加载一次，它会动态创建这些元素并让 IE 认可它们
• 注意加载时机：必须在所有 CSS 之前，且不能放在条件注释外的普通 script 中（IE9+ 会执行两次）
• 现代项目若已放弃 IE10 以下支持，html5shiv 可删；但若仍需兼容企业内网 IE8 环境，它仍是刚需

原生 API 不可用 ≠ 功能彻底消失，但 polyfill 有边界

localStorage、Geolocation、Canvas.getContext('2d') 在 IE7–IE8 中完全不存在，Modernizr 检测返回 false 是准确的。此时用 polyfill 并非万能：

• localStorage 的 polyfill（如 store.js）底层依赖 userData 行为，仅 IE5.5–IE9 支持，且有 128KB 单域限制
• Canvas 的 polyfill（如 excanvas）仅支持 2D，不支持 toDataURL、getImageData

  

  等关键方法
• Geolocation 无法 polyfill——没有 GPS 或网络定位能力的旧设备，JS 再怎么模拟也无法获取坐标

video/audio 标签的兼容陷阱不止在 IE

看似最简单的 ，实际在 Safari 10.1 以下不支持 MP4 的 H.265 编码，在 Android 4.3 WebView 中可能因 MIME type 未正确返回而卡在 loading 状态，甚至某些国产浏览器把 autoplay 当作广告拦截掉。

• 永远提供至少两种格式： +
• 用 canPlayType() 主动检测，而不是依赖 onerror：后者在部分安卓 WebView 中不触发
• 避免在 iOS Safari 上依赖 autoplay——它要求同时满足 muted + 用户手势触发，否则静音也不会播

真正棘手的兼容问题，往往不出现在“新特性用不了”，而出现在“旧特性被新标准悄悄改了行为”：比如 在 HTML5 中点击不再默认滚动到页面顶部，

提交时若没写 action，HTML4 会提交到当前 URL，HTML5 则可能报错或清空数据。这些细节，比加一个 polyfill 更难被发现和测试。