chrome内置翻译只认字面值translate="no",且仅在初始html解析时生效;动态插入节点、input/textarea的value、缺失或错误lang值(如lang="zh")均会导致失效。

Chrome 内置翻译是否认 translate="no"
认,但只在初始 HTML 解析时生效,且必须写成字面值 "no"。写成 translate="false"、translate="" 或 translate="off" 全部无效。它不依赖 JS 运行,但动态插入的节点(如 el.innerHTML = "<code>fetch()")不会自动继承,必须手动加属性。
常见失效场景包括: 标签没设 lang,或 lang="zh" 缺区域码(应为 lang="zh-CN");第三方组件(如 Ant Design 渲染出的 <button></button>)覆盖了你写的 translate 值;<input value="v5.2.0"> 的 value 属性不继承父级设置,必须单独加 translate="no"。
Edge 和 Firefox 翻译栏对 translate="no" 的支持程度
Edge(基于 Chromium)行为与 Chrome 完全一致,同样只识别 translate="no" 字面值,继承逻辑、lang 依赖、动态内容补全要求也都相同。Firefox 自带翻译功能较弱,目前不主动读取 translate 属性;但若用户装了 Google 翻译插件,该插件会尊重 translate="no",前提是页面已声明 lang 且结构合法。
验证方式统一:打开 DevTools → Elements 面板,直接检查目标元素上是否存在 translate="no" 属性,而不是看“翻译后有没有变”——因为有些插件会跳过检测直接翻译。
class="notranslate" 和 translate="no" 能否共存
可以,而且推荐共存。前者是 Google 系统级约定(被 Chrome、Google 翻译插件、translate.google.com 识别),后者是 W3C 标准(被所有现代浏览器内置翻译引擎识别)。两者优先级不同:translate="no" 在 Chrome 中优先级更高;class="notranslate" 对旧版 Edge 或某些轻量爬虫式翻译工具更有效。
稳妥写法示例:
<code><code translate="no" class="notranslate">npm install -D vite</code></code>。注意:
class="notranslate" 不是标准 HTML 属性,SSR 框架(如 Next.js)预渲染时可能忽略它,但 translate="no" 会被保留。
哪些翻译工具根本无视 translate="no"
纯客户端脚本类工具(比如用 BeautifulSoup + googletrans 写的简易翻译爬虫)、部分企业内网自研翻译服务、以及极少数轻量浏览器插件(如某些仅替换 DOM textContent 的小工具),它们不解析 HTML 属性,只做字符串正则匹配,translate="no" 对它们完全无效。
这类工具无法靠前端属性防御,真正要防住,得从源头控制:服务端返回前过滤敏感字段,或用 <span></span> 包裹关键字符串并加 data-raw 属性供 JS 运行时还原。最容易被忽略的是——你以为加了 translate="no" 就万事大吉,但实际被翻的,往往是那些没走 DOM 解析路径的工具。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











