Chrome 翻译引擎将按钮内孤立 Unicode 图标字符（如 ✅、▶）误判为待翻译文本，导致错误替换或布局破坏；必须在 button 标签上显式设置 translate="no"，且大小写敏感，父容器设置无效，动态插入时需手动添加。
按钮里含图标字符（如 ✅、▶、⚙️）时为什么会被 Chrome 翻译
Chrome 自动翻译引擎会把按钮内纯 Unicode 图标字符当作“待翻译文本”处理，尤其在中英文混排页面中——它无法识别这些符号是 UI 装饰而非自然语言，可能强行替换成中文描述（如把 ⚙️ 翻成“设置”），或插入空格/换行破坏布局。这不是 bug，是翻译器对孤立 Unicode 字符的默认 fallback 行为。
translate="no" 必须加在按钮元素本身，不能只靠父容器
图标字符没有语义容器（比如没包在 <span> 里），直接写在 <button> 内容中时，translate="no" 必须显式加在 <button> 标签上，否则不生效：
<button translate="no">✅ 保存</button>
以下写法无效：
-
<div translate="no"><button>✅ 保存</button></div>——<button>未继承，Chrome 不认 -
<button class="no-translate">✅ 保存</button>—— class 名浏览器完全忽略 -
<button translate="false">✅ 保存</button>—— 只认字面值"no"，大小写敏感
图标字符 + 文字混合时，整个按钮都要禁译
只要按钮内含任何图标字符，就别拆开处理——即使文字部分理论上可译，Chrome 会把整段 DOM 文本当一个单元提取，一旦其中含不可译符号，整个按钮内容都可能被错误替换或截断。所以统一用 translate="no" 锁定整个按钮：
立即学习“前端免费学习笔记（深入）”；
<button translate="no">▶ 开始同步</button><br><button translate="no">⚠️ 确认删除</button>
不要尝试只给图标加属性，因为：
- 图标和文字在 DOM 中是相邻文本节点，无法单独绑定属性
- 用
<span translate="no">✅</span> 保存仍可能被 Chrome 拼接后误译 - 按钮的
innerText是连续字符串，翻译器不区分子节点边界
动态渲染按钮时，必须手动补 translate="no"
Vue 的 v-html、React 的 dangerouslySetInnerHTML 或 JS 直接 innerHTML = "..." 插入的按钮，不会自动继承父级 translate 状态。哪怕外层 <div translate="no"> 已设，新插入的按钮也必须自带该属性：
el.innerHTML = '<button translate="no">✅ 提交</button>';
漏掉这一步，是生产环境最常被忽略的失效点——DevTools 里看 HTML 源码有 translate="no"，但 JS 插入后实际 DOM 上没有，Chrome 就照翻不误。
