HTML在IE浏览器怎么兼容_老版本浏览器问题解答【解答】-html教程-PHP中文网

IE10+支持Flexbox但需-ms-前缀，IE8/9需兼容addEventListener、JSON、querySelector等API差异，且存在盒模型、事件、渲染等隐性不一致问题。

html在ie浏览器怎么兼容_老版本浏览器问题解答【解答】

IE11 还能用 `flex`，但 IE10 及更早版本必须加 `-ms-` 前缀

IE 对 CSS Flexbox 的支持是分水岭式的：IE10 开始支持（带 -ms- 前缀），IE11 支持无前缀版本，但行为仍有差异。比如 flex: 1 在 IE10/11 中可能不触发收缩，而 Chrome 会。

常见错误现象：display: flex 写了但子元素堆成一列、宽度不占满、align-items 失效。

必须为 IE10+ 显式写两套声明：display: -ms-flexbox; display: flex;
flex-direction 在 IE 中对 column-reverse 支持极差，建议避免
IE11 不支持 flex-wrap: wrap-reverse，写了等于没写
用 Autoprefixer 时需明确配置 browsers: ["ie >= 10"]，否则默认可能不输出 -ms-

`addEventListener` 在 IE8 及以下根本不存在

IE8 及更早版本只认 attachEvent，且事件名要加 on 前缀（如 "onclick" 而非 "click"），this 指向也不同——它永远指向 window，不是绑定的元素。

使用场景：需要兼容 XP 系统下运行的 IE8（某些工控、银行内网仍存在）。

别直接判 if (element.addEventListener) 就完事，IE8 会进 else 分支但 attachEvent 在 IE9+ 已被废弃，混用反而出错
attachEvent 无法保证事件执行顺序，多个 onclick 绑定可能乱序触发
推荐用轻量封装，例如：function addEvent(el, type, fn) { return el.addEventListener ? el.addEventListener(type, fn) : el.attachEvent("on" + type, fn); }，但要注意 IE8 下需手动处理 this 绑定

`JSON.parse` 和 `JSON.stringify` 在 IE7 及以下完全不可用

IE8 开始原生支持 JSON 对象，IE7 及以下连 JSON 全局变量都没有。很多老项目用 eval() 解析 JSON，这是严重安全隐患，且 IE7 对 Unicode 转义（如 \u4f60）解析不稳定。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

性能影响：引入 json2.js（Douglas Crockford 官方补丁）约增加 3KB gzip 后体积，但能彻底解决兼容问题。

不要用条件注释只给 IE 加载 json2.js，因为 IE10+ 已不支持条件注释，反而漏掉部分 IE8/9
若已用打包工具（如 Webpack），可配 resolve.alias 把 json 指向兼容层，但注意 Node 环境下不能误替换
JSON.stringify({ a: undefined }) 在 IE8 返回 {}，Chrome 返回 {}，看似一致，但传入函数或循环引用时，IE8 直接报错而非静默忽略

IE 的 `document.querySelector` 从 IE8 开始支持，但仅限 CSS2.1 选择器

IE8 支持 querySelector，但不支持属性选择器中的波浪号匹配（[class~="btn"]）、伪类（:nth-child）、子选择器（ul > li 在部分 IE8 SP2 补丁中才修复）。

容易踩的坑：开发时用 Chrome 测试正常，上线后 IE8 报 TypeError: Object doesn't support property or method 'querySelector'——其实不是方法不存在，而是选择器语法非法导致返回 null，后续调用 .style 才真正报错。