translate="no" 必须直接加在承载品牌词的最内层元素上才有效，如按钮文本或span包裹的品牌名；父容器设置无效，且需配合正确的lang属性和Chrome翻译机制验证。
translate="no" 必须加在按钮等最内层元素上才有效
把 translate="no" 放在 <div> 或 <form> 上，指望它“传给”子按钮，完全无效。浏览器只检查文本节点直接所属的元素是否声明了该属性。
正确写法是直接加在承载品牌词的元素上：
<button type="submit" translate="no">Pay with Stripe</button> <button type="submit" translate="no">Sign in with Apple</button>
常见错误包括：
- 给父容器加
translate="no"，但按钮本身没加 - 对
<input type="submit" value="Buy on Amazon">加该属性——value属性值不响应translate，必须换用<button> - 写成
translate="false"或translate=""——Chrome 只认字面值"no"，大小写也必须小写
品牌词混在图标+文本结构里时，只包裹关键部分更稳妥
如果按钮含 SVG 图标和文字（如 <button><svg>...</svg> Checkout on PayPal</button>），整段加 translate="no" 会连 “Checkout” 一起锁死，影响本地化体验。
立即学习“前端免费学习笔记（深入）”；
更精准的做法是只把品牌名单独包裹：
<button type="submit"> <svg aria-hidden="true">...</svg> Checkout on <span translate="no">PayPal</span> </button>
这样既保住了“Checkout”的可译性，又确保 PayPal 不被替换。注意：<span> 必须是文本的直接父元素，不能隔一层 <div>。
当 translate="no" 不够稳，用 data- 属性 + CSS content 替代
Chrome 手动触发整页翻译时，translate="no" 可能被绕过；某些轻量翻译插件也不尊重它。此时应把品牌词移出可翻译的 DOM 文本流。
方案是：用 data- 属性存原始值，CSS ::after 注入显示：
<button type="submit" data-brand="Google Pay">Pay</button>
button[data-brand]::after {
content: attr(data-brand);
margin-left: 0.25em;
}优点：
- 屏幕阅读器仍读 “Pay”，无障碍友好
-
Google Pay是纯样式内容，几乎不会被任何翻译工具捕获 - SEO 不受影响（搜索引擎仍索引 button 的文本内容）
注意：content 中不要放需本地化的词（如 “Pay” 若需多语言，得另做 i18n 处理）；iOS Safari 需 iOS 15.4+ 才稳定支持 attr()。
lang 和 translate 必须配合，否则 Chrome 可能降级处理
translate="no" 不是独立生效的。如果页面 <html> 标签缺失 lang，或写成 lang="en"（缺区域码）、lang="zh"（应为 lang="zh-CN"），Chrome 会判定语言不可信，直接忽略 translate="no"。
正确组合是：
<html lang="zh-CN">
<body>
<button translate="no">Login with GitHub</button>
</body>
</html>验证是否生效，别只看右键菜单是否消失——要实际开启 Chrome 全页自动翻译，观察按钮文字是否变化；或打开 DevTools → Elements 面板，确认目标元素上真实存在 translate="no" 属性。
最容易被跳过的是动态插入的内容：JS 用 innerHTML 或 appendChild() 添加的新按钮，必须手动调用 el.setAttribute("translate", "no")，否则继承无效。
