问题现象描述

chrome 调试element面板结果

对比源码和调试结果我们发现，我们的文字内容“你好世界”被额外的font标签包裹住了，而这个font标签在我们的源码里面是没有的，可见这个font标签是由浏览器生成的(因为我们的页面没有执行任何js代码)。

细心的小伙伴可能发现啦，**页面下方还多了两个div标签内容，添加了id名和class名，不仅如此，html根标签还被添加了class样式为”translated-ltr”**。通过以上几点，作为我们问题的出发点，我们百度搜索这个id名和class名 (id=”goog-gt-tt” ,class=”skiptranslate”)发现，最终通过百度查询资料发现，原来这个font标签和页面下方多出的div两个都是由chrome 翻译插件生成的。

下图所示div即为翻译插件生成的div内容，在上面的问题截图中我们也能看到它的身影。

如图所示为chrome翻译插件弹窗内容

方案一

我们将这个翻译功能禁止掉，即将上面翻译插件截图中的一律翻译按a钮取消掉

方案二

明确告诉网页，当前页面不需要使用翻译功能。

因为chrome浏览器会检查网页html 的 lang 属性（用于申明网页内容的语言类型），当发现网页申明语言类型（默认为en英文）和当前系统语言不同时，就会出现是否要翻译当前网页的插件弹窗，选择是否要翻译当前网页内容，基于这个，我们主动告知网页内容为中文内容，那么就不会出现弹窗啦。使用如下申明

1
2
<!-- 声明当前网页的语言类型为中文 -->
<html lang="zh">


上面这种添加语言标识的方法有一个问题是，当系统语言不是中文的时候，依然会有翻译提示弹窗。

方案三

当然，还有另外一种禁用谷歌翻译插件的方法，通过添加meta字段告诉浏览器网页不需要使用chrome翻译功能。示例如下

1
2
<!-- 禁用谷歌翻译，防止在谷歌翻译下vue的数据绑定功能失效 -->
<meta name="google" content="notranslate">