怎么让index.html兼容低版本浏览器？-html教程-PHP中文网

index.html兼容ie8–ie11及旧版android/safari需分html、css、js三层处理：doctype和html5shiv必须置head最前；queryselector等api须降级为getelementbyid等；flexbox需同时写display: flex和-ms-flexbox；资源路径、字体格式等细节须严格适配。

怎么让index.html兼容低版本浏览器？

直接说结论：index.html 要兼容 IE8–IE11 以及旧版 Android Browser / Safari，不能只靠一个 <meta> 或一段 CSS —— 得从 HTML 解析、CSS 渲染、JS 执行三层分别处理，漏掉任何一层都会白忙。

DOCTYPE 和 html5shiv 必须放在 head 最前面

IE8 及以下压根不识别 <header></header>、<section></section> 这些标签，DOM 都不生成，更别说样式和 JS 操作了。光写 header { display: block } 完全无效。

必须是文件第一行，前面不能有任何字符（包括 BOM、空格、PHP 输出）

用条件注释只给 IE8–IE9 加载 html5shiv：

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

这个 <script></script> 必须在所有 <link rel="stylesheet"> 之前，否则样式可能失效
如果项目部署在内网或 CDN 不稳定，建议把 html5shiv.min.js 内联进，避免加载失败导致整页语义标签不可用

querySelector / classList / fetch 这类 API 在 IE11 下照样报错

IE11 支持 let，但不支持 fetch、classList、querySelector（部分场景）、Array.from 等——Babel 转译语法没用，这是原生能力缺失。

Wechat HTML Publisher

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

下载

document.querySelector('.nav') → 改成 document.getElementById('nav') 或 document.getElementsByTagName('nav')[0]
el.classList.add('active') → 改成 el.className += ' active'（注意前后加空格，防重复）
fetch('/api') → 必须换 XMLHttpRequest，或引入 whatwg-fetch polyfill，且它必须在所有业务 JS 之前同步加载（别加 async 或 defer）
ES6+ 语法如箭头函数、模板字符串、解构赋值，得用 Babel 编译目标设为 ie 11，并手动引入 core-js/stable 补 API

Flexbox 在 IE10–IE11 的写法不是加前缀那么简单

IE10 用的是 2012 年草案版 Flexbox（display: -ms-flexbox），IE11 开始混用标准 + 旧版，但 flex-wrap、align-content、gap 全都不支持，硬写等于没写。

必须同时写两套：display: flex + display: -ms-flexbox，justify-content: center + -ms-flex-pack: center
flex: 1 在 IE 中计算不稳定，优先用 flex: 1 1 auto 或显式设 width/min-width
容器高度塌陷很常见：IE 下若子项没设 min-width，flex 容器可能算不出高度，需加 min-height: 1px 强制触发
别指望 @supports (display: flex) 自动兜底——IE 完全不识别该规则，得靠 JS 特性检测或条件注释分离 CSS

图片、字体、路径这些细节在 IE 里最容易栽跟头

IE 对资源加载极其敏感，报错往往不提示，只显示空白或回退到宋体，排查起来特别耗时。

<img src="logo%20v2.png"> 在 IE 里直接 404，URL 编码空格不行，得改成 logo_v2.png 或 logo-v2.png
Web 字体必须提供 .eot（IE8–IE11 必需）和 .woff（IE9+ 推荐），.woff2 对 IE 完全无效
@font-face 中 src 顺序很重要：url("font.eot") format("eot") 必须放最前，IE 才会停在那里不继续解析
IE 不支持 data- 属性的 dataset API，得用 el.getAttribute('data-id') 替代 el.dataset.id

真正麻烦的不是某一行代码怎么改，而是旧浏览器的“能力断层”不连续：IE8 没 querySelector，IE9 有了但没 addEventListener，IE10 有 addEventListener 但 Flex 是旧版，IE11 支持部分新语法却缺 fetch……每个版本都得单独验，不能假设“IE11 能跑，IE10 就差不多”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！