index.html兼容IE8–IE11及旧版Android/Safari需分HTML、CSS、JS三层处理：DOCTYPE和html5shiv必须置head最前；querySelector等API须降级为getElementById等；Flexbox需同时写display: flex和-ms-flexbox；资源路径、字体格式等细节须严格适配。

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

DOCTYPE 和 html5shiv 必须放在 head 最前面

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

• <!DOCTYPE html> 必须是文件第一行，前面不能有任何字符（包括 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> 必须在所有 <link rel="stylesheet"> 之前，否则样式可能失效
• 如果项目部署在内网或 CDN 不稳定，建议把 html5shiv.min.js 内联进 <head>，避免加载失败导致整页语义标签不可用

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

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

• 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 全都不支持，硬写等于没写。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 必须同时写两套：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 就差不多”。