notranslate类与translate="no"在Microsoft Edge中失效的解决办法

一、让Edge识别禁止翻译标记的可行方案 #

• 把class="notranslate"和translate="no"同时加到目标元素上，优先用块级元素（比如<div>）包裹需要保留原文的内容——Edge对行内元素（如<span>）的标记支持可能存在bug。示例代码：

  <div class="notranslate" translate="no">需要保留原文的术语</div>
  

• 如果必须用行内元素包裹，额外添加lang属性明确指定当前语言（比如页面是中文就设lang="zh-CN"），给Edge明确的“无需翻译”信号：

  <span class="notranslate" translate="no" lang="zh-CN">特定术语</span>
  

• 针对整页或大段内容，直接在<html>标签上同时加translate="no"和lang属性，Edge对根元素的标记优先级更高：

  <html lang="zh-CN" translate="no">
  

二、仅禁用Edge自动翻译，不影响其他浏览器 #

如果上面的方法还是无效，可以用以下两种针对性方案：

方法1：用Edge专属meta标签 #

在页面<head>里添加这个标签，只有Edge会识别并关闭翻译，其他浏览器完全忽略：

<meta name="Microsoft.Translator" content="off">

方法2：JS检测Edge后禁用翻译 #

通过UA字符串判断当前浏览器是否为Edge，再动态给页面添加全局禁止翻译的属性，不干扰其他浏览器：

if (/Edg\/\d+/.test(navigator.userAgent)) {
  document.documentElement.setAttribute('translate', 'no');
}

内容的提问来源于stack exchange，提问作者Bravo2bad