translate="no" 不能真正阻止浏览器翻译按钮文本，因其仅具建议性且不强制生效；必须直接加在按钮等最内层元素上，配合 data- 属性与 css content 方案才能可靠锁定品牌词。
translate="no" 能否真正阻止浏览器翻译按钮文本
不能完全阻止。现代浏览器（Chrome、Edge）对 translate="no" 的支持是“建议性”的——它只影响自动翻译扩展或内置翻译器的默认行为，但不强制禁用。尤其当用户手动触发整页翻译时，按钮内文本仍可能被替换。关键不是加不加这个属性，而是加在哪儿、配合什么策略才有效。
必须加在按钮元素本身，而非父容器或 span
常见错误是把 translate="no" 放在 <div> 或 <code><form></form> 上，指望它“继承”到子按钮里。实际无效。浏览器只检查文本节点直接所属的元素是否声明了该属性。
正确写法：
<button type="submit" translate="no">Submit to Stripe</button>
错误写法（不起作用）：
<div translate="no"><button>Submit to Stripe</button></div>
-
translate="no"必须出现在承载品牌词的最内层 HTML 元素上（如<button></button>、<input value>、<span></span>） - 若按钮含图标 + 文本混合结构，仅包裹品牌词部分的
<span translate="no">Stripe</span>更精准 - 对
<input type="submit" value="Pay with PayPal">，translate="no"无效——value属性值不受该属性控制，需改用<button></button>
搭配 data- 属性和 CSS content 实现更可靠的品牌词锁定
当 translate="no" 不够稳时，把品牌词移出可翻译的 DOM 文本流，是更健壮的做法。典型方案：用 data- 属性存原始值，CSS ::after 注入显示。
<button type="submit" data-brand="Apple Pay">Pay</button>
button[data-brand]::after { content: attr(data-brand); margin-left: 0.25em; }
这样按钮的可访问文本仍是 “Pay”，屏幕阅读器照常读，但“Apple Pay”作为纯样式内容，几乎不会被任何翻译工具捕获或替换。
- 注意：确保
content中不包含需要本地化的其他词（如 “Pay” 本身若需多语言，应另做 i18n 处理） - 此法对 SEO 和可访问性无负面影响，但需测试旧版 Safari 对
attr()的支持（iOS 15.4+ 安全） - 若品牌词需响应式换行或复杂排版，优先用
<span translate="no"></span>而非 CSS 注入
验证是否生效：别只看浏览器右键菜单
右键“翻译成中文”菜单消失 ≠ 真的锁住了。真正要测的是：开启 Chrome 全页自动翻译后，按钮文字是否变化；或使用 Google Translate 网页版粘贴 URL，观察渲染结果。
- 在 Chrome 开发者工具中，选中按钮元素，检查 computed 样式里的
translate值——它始终为none，与该属性无关，别被误导 - Firefox 不支持
translate="no"，Safari 支持但行为不一致，跨浏览器一致性必须靠 CSS + data- 方案兜底 - 某些企业级翻译插件（如 Linguee Toolbar）会无视该属性，唯一通用防线是避免将品牌词写死在可翻译文本节点中
品牌词一旦混在普通文本里，就等于主动交给翻译引擎裁决。所谓“锁定”，本质是把它从翻译上下文里摘出来——要么靠属性提示，要么靠结构隔离。没捷径。
