ie8–ie11不支持lang属性、:lang伪类及现代i18n api,需手动通过js添加class、双字段检测语言、降级i18next并引入polyfill,且日期/数字/rtl等需手写fallback。

老旧浏览器(尤其是 IE8–IE11)根本不读取 lang 属性或 Accept-Language 请求头来做语言切换,所谓“HTML 国际化”在它们身上基本是空谈——你得手动接管语言逻辑,不能依赖现代 API。
IE 不识别 lang 属性,CSS 选择器失效怎么办
IE8–IE9 把 当成普通属性,[lang="zh-CN"] 这类 CSS 选择器完全不匹配。这不是样式写错了,是解析器压根不认这个属性。
- 必须用 JS 动态加 class:比如
document.documentElement.className = 'lang-zh-CN',再写.lang-zh-CN .nav { font-family: 'PingFang SC', sans-serif; } - 避免嵌套太深的
[lang]选择器,IE8 只支持单层属性选择器,section[lang="ja"] p会失效 - 不要指望
:lang(zh)伪类——IE 完全不支持,连 IE11 都没实现
navigator.language 在 IE 中返回值不可靠
IE 返回的是系统区域设置(如 zh-CN),不是用户在浏览器里选的语言;而且 navigator.language 在 IE8 是 undefined,navigator.userLanguage 才是它的替代字段。
- 要兼容就得双字段检测:
const lang = navigator.language || navigator.userLanguage || 'en' - 别直接用这个值做资源加载——IE 用户可能设了日语系统但实际要中文内容,建议 fallback 到 cookie 或 URL 参数(如
?lang=zh) - 注意大小写:IE 返回
ZH-CN,Chrome 返回zh-CN,比对前统一转小写
现代 i18n 库(如 i18next)在 IE11 里跑不起来
i18next v22+ 默认用 Promise、fetch 和 ES6 模块,IE11 会卡在 SyntaxError: Unexpected token 'export' 或 Object doesn't support property or method 'fetch'。
- 必须降级到 i18next v19.x(最后支持 IE11 的主版本),且打包时显式指定
target: 'es5' - 在引入 i18next 前,先加载
core-js和whatwg-fetch:<script src="https://cdn.jsdelivr.net/npm/core-js@3.30/bundles/core-js.min.js"></script>+<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/fetch.umd.js"></script>
- 禁用 i18next 的 backend 插件自动加载(它默认用
fetch),改用静态 JSON 对象初始化:<code>i18next.init({ resources: { zh: { translation: { ... } } } })
真正麻烦的不是语言切换本身,而是所有依赖语言的 DOM 行为——比如日期格式化、数字分组、双向文本(RTL)的 dir 属性动态切换,在 IE 里都要手写 fallback,且无法靠单一 polyfill 解决。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











