HTML国际化适配需全链路预设容错：UTF-8无BOM编码、Intl API渐进增强检测与按需polyfill、data-i18n选择器兼容IE8+的fallback方案、textContent优先更新文本、RTL布局CSS回退、lang属性服务端注入确保前后端一致。
HTML网页国际化适配中，异常处理不是“出错了再补救”，而是从编码、解析、加载到渲染全链路预设容错点。关键在于：UTF-8 BOM、Intl API 可用性、document.querySelectorAll('[data-i18n]') 兼容性这三处最容易在真实环境里突然失效。
UTF-8 BOM 导致页面乱码或回退到系统默认编码
VS Code 默认保存为 UTF-8 with BOM，但 IE/Edge Legacy 会忽略 <meta charset="UTF-8">，直接按 Windows 系统编码（如 GBK）解析，结果中文变方块、阿拉伯数字错位、甚至整个 <head> 解析失败导致 Quirks Mode 激活。
- 检查方式：Chrome DevTools → Network → Response Headers → 看
Content-Type是否含charset=UTF-8；Elements 面板顶部若显示 “Quirks Mode”，基本可断定编码失守 - 修复动作：VS Code 中右下角点击编码名称 → “Save with Encoding” → 选
UTF-8 without BOM；同时确保<meta charset="UTF-8">是<head>中第一个标签（前面不能有注释、空格或 script） - 服务端兜底：Apache 加
AddDefaultCharset UTF-8，Nginx 加charset utf-8;；Python 内置服务器（python -m http.server）不认<meta>，必须换http-server或类似静态服务器
Intl API 缺失或部分失效引发运行时错误
Intl.DateTimeFormat 在 IE11 返回 undefined is not a function，Safari 12.1 之前对 Intl.RelativeTimeFormat 完全不支持，而 new Intl.NumberFormat('ar') 在某些 Android WebView 中会静默降级为 en 格式——这些都不会抛错，但用户看到的是错的日期或货币符号。
- 检测必须写成：
if ('Intl' in window && 'DateTimeFormat' in Intl)，不能只判Intl存在 - polyfill 仅加载必要模块：用
intl-pluralrules+@formatjs/intl-relativetimeformat，而非整包intl，避免体积膨胀 - 格式化实例不可复用：切换语言后，必须新建
new Intl.DateTimeFormat(lang)，旧实例仍按原 locale 缓存结果，不会自动更新
data-i18n 选择器在低版本浏览器中不可用
document.querySelectorAll('[data-i18n]') 在 IE8–IE10 中返回空 NodeList，因为这些版本不支持属性选择器；若代码里没 fallback，整个翻译逻辑就静默跳过，页面显示原始键名（如 home.title）。
立即学习“前端免费学习笔记（深入）”；
- 兼容写法：改用
document.getElementsByTagName('*')+ 循环检查el.hasAttribute('data-i18n')，虽慢但通吃 IE6+ - 更稳妥方案：用
getElementsByClassName('i18n')替代，把 class="i18n" 和data-i18n="xxx"同时加在元素上，IE8+ 支持 class 选择器 - 注意 DOM 就绪时机：若脚本放在
<head>里，需等DOMContentLoaded后再执行查找，否则找不到任何节点
切换语言时状态丢失与布局错乱
直接 innerHTML = translatedText 会清空子元素事件监听器；对 RTL 语言（如阿拉伯语、希伯来语）硬写 dir="rtl" 又可能和 CSS 逻辑属性（如 margin-inline-start）冲突，导致按钮顺序颠倒但文字方向没变。
- 文本更新优先用
textContent；仅当需保留内联 HTML（如<strong>）时才用innerHTML，且必须对翻译值做 HTML 转义（或白名单过滤），否则引入 XSS 风险 - RTL 布局不要只靠
dir属性：CSS 中必须同时声明text-align: start和margin-inline-start: 1em，并为 IE/Safari 12.1- 补margin-left/margin-right回退规则 - 切换语言后，必须同步更新
document.documentElement.lang，否则屏幕阅读器、搜索引擎、甚至部分 Intl 实例都可能沿用旧 locale
最常被跳过的环节是服务端与前端语言判定逻辑不一致：前端读 navigator.language，后端看 Accept-Language 头，两者偏差时首屏就错译。真正稳定的方案是服务端注入 lang 到 <html lang="zh-CN">，前端初始化时只读这个值，不自行探测。
