IE浏览器兼容性处理技巧

IE浏览器兼容性处理绝非简单添加meta标签就能解决，而是一项需分层拆解的系统工程：从确保DOCTYPE严格首行无空格以规避致命的怪异模式，到为HTML5语义标签手动补全display:block并配合html5shiv条件加载；从JS层面全面降级API、禁用ES6+语法、重写事件监听逻辑，到Flex布局加前缀且Grid必须彻底回退为传统方案；核心原则始终是——精准匹配各版本IE（IE6–IE11）的真实能力边界，优先保障关键功能可用性，理性取舍视觉与交互细节，避免无效补丁堆叠带来的维护灾难。

IE 浏览器兼容性问题不是靠“加个 X-UA-Compatible 就能解决”的事，而是得按 IE 实际能力分层处理：IE8 不认识 querySelector，IE9 不渲染 section 为块级元素，IE10 的 flexbox 行为和现代浏览器差一倍——不逐层拆解，补丁越打越乱。

DOCTYPE 必须首行无空格，否则直接进怪异模式

这是所有兼容问题的起点。IE6–IE11 一旦触发怪异模式（Quirks Mode），盒模型、浮动逻辑、字体渲染全换一套规则，后续 CSS 和 JS 都可能失准。

• 必须独占第一行，前面不能有任何字符：包括 、PHP 输出的空白、甚至 UTF-8 BOM 字节
• 验证方式：在 Chrome DevTools 的 Elements 面板顶部看渲染模式，显示 “Standards” 才算成功；若显示 “Quirks”，就得回查 HTML 源码开头
• 不要用 这类过时写法，它在 IE 中反而容易触发兼容视图

HTML5 语义标签在 IE8 及以下默认是 inline，必须手动设 display:block

IE8 根本不会把 header、nav、section 当成块级元素，直接导致布局塌陷、样式失效。仅引入 html5shiv 不够——它只让 IE 知道这些标签存在，但不会自动加 display: block。

• 必须配这条 CSS 规则：article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
• html5shiv 要条件加载，避免现代浏览器额外请求：
• 这个