必须加translate="no"的包括：JS代码（fetch()、useState等）、API路径（/api/v2/products）、认证字段（X-Auth-Token）、版本号（v5.2.0）、CSS类名（btn-primary）及测试ID（add-to-cart-btn），防止浏览器误译导致功能异常。
直接加 translate="no" 不能优化多语言展示效果，它只管浏览器自动翻译是否动某段文本；真要优化跨境电商多语言体验，得靠 i18n 框架驱动文案替换，translate 的唯一作用是防止技术字符串被 Chrome 错译。
哪些内容必须加 translate="no" 才不翻错
跨境电商页面里，以下几类文本一旦被浏览器自动翻译，会直接导致功能异常或用户困惑：
-
fetch()、useState、props.children—— 大小写、括号、点号一变就失效，JS 报错 -
/api/v2/products?category=electronics、X-Auth-Token、user_email—— 斜杠、冒号、下划线是协议/字段语义，译成中文就断请求 -
v5.2.0、React 18.3、TPM2.0—— 数字和点若变成“五点二零”，商品规格页就失去机器可读性 -
class="btn-primary"、data-testid="add-to-cart-btn"—— CSS 类名和测试 ID 是运行时关键标识，改了就崩样式或 E2E 测试 -
<time datetime="2026-09-04"></time>外层容器 —— 避免日期被转成“2026年9月4日”，破坏订单时间一致性
translate="no" 继承规则和三个必补漏点
它可继承，但浏览器对某些元素完全不认父级设置，必须手动补：
-
<input value="XZ-3000">和<textarea>abc123-token</textarea>的value值不继承 —— 即使整个<form translate="no">，也得单独加属性 - JS 动态插入的节点（如
el.innerHTML = "npm install -D vite"）不继承 —— 必须在插入后立即调用el.setAttribute("translate", "no") -
<svg>内的<text>元素受继承控制 —— 但很多图标旁的型号说明（如 “Model: XZ-3000”）常被忽略，需显式加
lang 和 translate 混用时最常踩的坑
很多人以为写了 lang="en" 就等于“这段不用翻”，结果 React 被 Chrome 翻成“反应”。实际规则很明确：
立即学习“前端免费学习笔记（深入）”；
-
lang只声明语言归属，不影响翻译行为；translate才是开关 - 正确写法必须显式并存：
<div lang="en" translate="no">useState</div> - 第三方组件库（如 Ant Design、Shopify Polaris）输出的 DOM 可能自带
translate，你覆盖前得 inspect 实际渲染结构，不能只看 Vue/React 模板源码 - 若页面是中文主站但嵌了英文商品参数表，
lang="zh-CN"是必须的，否则 Chrome 可能拒绝执行translate="no"
为什么不能给 <html translate="no"> 图省事
看似一键禁译，实则让整个多语言策略失效：
-
<button>Add to Cart</button>、<span>Invalid email</span>全部跳过翻译，用户看到的是中文界面混着英文按钮和提示 - 某些旧版 Edge 或翻译插件对全局
translate="no"支持不稳定，局部精准控制更可靠 - 纯英文技术文档页应优先考虑不提供翻译入口（比如移除
chrome://settings/languages中的英语翻译开关），而不是靠 HTML 属性兜底
真正需要加 translate="no" 的永远只是极少数技术字符串，不是整页。最容易被忽略的是动态内容 —— JS 插入后没补属性，Chrome 照样乱翻；验证是否生效，别靠肉眼，直接打开 Chrome DevTools → Elements 面板查目标元素上是否存在该属性。
