HTML国际化兼容老旧浏览器语言设置方案

先说说结论：要在老旧浏览器（特别是IE8到IE11这个区间）里实现HTML国际化，基本别指望那些现代API能自动搞定。你得从头到尾手动接管语言逻辑，否则语言切换功能根本跑不通。

这些老版本的IE浏览器，既不识别 lang 属性，也不理会 Accept-Language 请求头里携带的语言信息。所谓“HTML 国际化”在他们身上，几乎就是一张空头支票。

IE 不认 lang 属性，CSS 选择器失效怎么办

IE8和IE9直接把 当成一个普通属性来对待。你写 [lang="zh-CN"] 这种CSS选择器，它根本不匹配。这可不是样式写得不对，而是解析器压根不认识这个属性。

• 唯一的出路：用JavaScript动态添加class。比如写一句 document.documentElement.className = 'lang-zh-CN'，然后样式里用 .lang-zh-CN .nav { font-family: 'PingFang SC', sans-serif; } 来定位。
• 注意选择器的嵌套深度。IE8只支持单层属性选择器，像 section[lang="ja"] p 这种写法，它会直接罢工。
• 至于 :lang(zh) 这个伪类，就别抱希望了。连IE11都没实现它，其他版本更别提。

navigator.language 在 IE 中返回值不可靠

IE返回的 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 加载进来： 和 。
• 后端插件自动加载功能也得禁掉，因为它默认是用 fetch 来请求资源。改用静态JSON对象来初始化：i18next.init({ resources: { zh: { translation: { ... } } } })。

说句实在话，语言切换本身并不是最麻烦的。真正棘手的是所有依赖语言的DOM行为——比如日期格式化、数字分组、以及双向文本（RTL）的 dir 属性动态切换。在IE里，这些都得手写fallback，而且没有任何一个单一的polyfill能彻底解决所有问题。