HTML国际化怎么适配老旧浏览器的语言设置？
作者：袖梨
2026-07-09
IE8–IE11不支持lang属性、:lang伪类及现代i18n API，需手动通过JS添加class、双字段检测语言、降级i18next并引入polyfill，且日期/数字/RTL等需手写fallback。
老旧浏览器（尤其是 IE8–IE11）根本不读取 lang 属性或 Accept-Language 请求头来做语言切换，所谓“HTML 国际化”在它们身上基本是空谈——你得手动接管语言逻辑，不能依赖现代 API。
IE 不识别 lang 属性，CSS 选择器失效怎么办
IE8–IE9 把 <html lang="zh-CN"> 当成普通属性，[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/[email protected]/bundles/core-js.min.js"></script>+<script src="https://cdn.jsdelivr.net/npm/[email protected]/fetch.umd.js"></script></li><li>禁用 i18next 的 backend 插件自动加载（它默认用 <code>fetch
），改用静态 JSON 对象初始化：i18next.init({ resources: { zh: { translation: { ... } } } })
真正麻烦的不是语言切换本身，而是所有依赖语言的 DOM 行为——比如日期格式化、数字分组、双向文本（RTL）的 dir 属性动态切换，在 IE 里都要手写 fallback，且无法靠单一 polyfill 解决。
