谷歌Chrome浏览器自动翻译导致前端页面数据错乱问题

最新推荐文章于 2025-12-11 23:30:00 发布
原创 最新推荐文章于 2025-12-11 23:30:00 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #js #web #css

本文探讨了谷歌Chrome的自动翻译功能如何意外地导致前端页面数据在中文状态下出现CSS样式混乱。作者分享了遇到的问题实例，并寻求解决方案，重点关注CSS和浏览器翻译对前端开发的影响。

谷歌Chrome浏览器自动翻译导致前端页面数据错乱问题（避雷）

浏览器的自动翻译会影响页面数据展示
因为我呢用的谷歌浏览器，有时候需要查看英文文档，平时会开着自动翻译翻译，如图：
在这里插入图片描述
然后今天在写网页的时候发现了这个问题

在这里插入图片描述
在这里插入图片描述

如图，在翻译为中文状态下，我在body标签内的span标签内写的是“很棒”，保存后刷新页面他会闪一下很棒，之后就会变成“很干净”，
在这里插入图片描述
这应该是CSS样式吧，我在CSS里面没写，可能是默认，有懂得朋友给我留言下。
在这里插入图片描述
这是原网页的状态下，显示是正确的。

peach_h
关注
【好物推荐】Chrome插件“查找和替换”，是Chrome浏览器中一款实用性极强的文本工具插件，通过合理配置规则与运行模式，显著提升文本处理效率。
本本本添哥
09-01 546
摘要： Chrome插件“查找和替换”是一款高效的网页文本处理工具，支持自动/手动/实时三种运行模式、跨设备同步及正则表达式等高级搜索功能。其模块化设计适配工作（文档协作）、学习（英文术语替换）及日常（网页内容定制）等场景，通过规则分组、快捷键和URL匹配提升操作效率。需注意动态网页适配和正则表达式语法风险，但插件仅修改前端显示，不影响原始数据安全。该工具通过结构化数据存储与事件监听技术，为用户提供精准、灵活的文本处理方案。
从零开始制作Chrome截图插件:新手完全指南
Winfredzhang的博客
11-14 1932
今天我要和大家分享如何制作一个简单但实用的Chrome扩展 - 网页截图助手。这个扩展可以帮助我们轻松截取整个网页的截图,无论页面有多长。本教程专门面向初学者,我会用最简单的语言,一步步带大家完成整个过程。manifest.json的配置Chrome扩展的权限系统扩展页面的开发Chrome API的使用方法这些知识将为你后续开发更复杂的Chrome扩展打下基础。希望这篇教程对你有帮助！如果你在开发过程中遇到任何问题,欢迎在评论区讨论。
谷歌Chrome浏览器自动翻译导致前端页面数据错乱问题 - 接口返回数据被翻译
zhichaosong的博客
09-08 6966
背景：Chrome浏览器自带谷歌翻译，这个翻译还是挺实用的，但如果前端代码设置不当，再加上用户操作失误就容易造成很多莫名其妙问题，下面详述问题现象、排查过程及解决方案 文章目录一、问题现象二、排查过程1. Table 主键2. 观察现象三、解决方案1. 方案一：手动禁用翻译2. 方案二：代码禁用翻译3. 方案三：代码设置语言 一、问题现象 有台客服电脑查数据怎么都查不对，地址、价格都对不上，但是别的电脑没问题、后端返回数据没问题，这个数据也不是随机的，每次查出来很固定，但是不对 二、排查过程 1. .
chrome自动翻译导致网页文本错乱怎么解决？chrome自动翻译导致网页文本错乱深入解决指南
onecdll的博客
05-07 1795
•在“语言”部分，您会看到“提供翻译”设置，取消选中“提供翻译”旁边的复选框，以禁用网页自动翻译功能。扩展的入口处，输入您要翻译的文字即可立即得到翻译结果，支持上百种语言互译，支持自动检测您输入的语言，同时为您保留翻译历史记录，随时可以找回。在浏览过程中遇到生疏的外语词汇，鼠标选中一键翻译，将在鼠标附近出现翻译结果，如果你开启“快速划词翻译”的按钮，鼠标选中将立即为您翻译。2. 针对特定网站禁用翻译： 如果您只希望在特定网站上禁用翻译，当浏览器询问是否翻译该页面时，选择“永不翻译此站点”。
chrome浏览器打开网页排版错乱
热门推荐
佩恩的博客
06-20 1万+
chrome浏览器打开网页排版错乱
chrome自动翻译导致网页文本错乱
写写写写到厌倦~
07-01 1651
问题 解决方法 在html标签中设置 <html lang="zh-CN"> // 默认为"en"，即英语 在html的head标签中加入如下代码 <meta name="google" content="notranslate" />
chrome浏览器 websocket调试插件
08-08
安装完成后，用户需要在Chrome浏览器的开发者工具中激活此插件，它会自动出现在网络（Network）标签页旁边的一个新标签页中。通过这个新标签页，用户可以深入地了解和分析WebSockets的行为，包括连接列表、消息统计...
[工具探索]Safari 和 Google Chrome 浏览器内核差异
hmx224_2014的专栏
01-31 8382
最近有些Vue3的项目，使用了safari进行测试环境搞开发，发现页面存在不同程序的页面乱码情况，反而google浏览器没问题，下面我们就对比下他们之间的差异点：日常开发google chrome占多数；现在主流浏览器 Google Chrom、Safari、Microsoft Edge、Mozilla Firefox、Opera；
ShrinkToMe：每10秒自动缩小Facebook界面的Chrome插件
“shrinktome-crx插件”是一款专为Google Chrome浏览器设计的扩展程序（即Chrome插件），其主要功能是通过自动化手段对Facebook的用户界面进行持续性的缩放操作，从而显著影响用户在访问该社交平台时的视觉体验与...
谷歌浏览器自动翻译功能导致页面保错
weixin_43837268的博客
01-08 3723
1.问题描述： 页面加载一段时间后，莫名报错 2.原因分析： 代码被转成中文了 3.解决方案： 关闭谷歌浏览器翻译功能，显示原网页。
因为 chrome 的语言翻译导致的网页文本错误
u011514600的博客
04-18 2521
之前有一个用户反馈了一个 bug，在网页上用户编辑的文本展示出现了错误，甚至包括一些系统文本出现了显示错误的情况。 开始调查 先试着再现一下。好的，没能成功操作出来 然后查了代码，发现代码的结构非常简单，基本不太可能是代码有 bug，先排除这个原因。 接下来猜想是否是 markdown 影响了，因为用户编辑的文本支持 markdown，在页面上我们把内容使用marked转换为 markdown 展示，也只有markdown会对用户的文本再做加工。 遗憾的是，简单地分析一下之后，也排除了这个原因，因为有一些未
解决chrome浏览器应用商店排版混乱问题
xiaoerbuyu1233的博客
12-18 4735
chrome://settings/clearBrowserData 可能是某个插件导致的,勾选上面的复选框清除数据即可 解决方法：清除缓存。(chrome://settings/clearBrowserData) 然后重新加载页面(Cmd+Shift+R) 参考Google Chrome不能正确显示网页【图文】_simmy_51CTO博客 ...
使用谷歌浏览器翻译之后，vue数据修改，页面显示不变
y1s2y3的博客
09-20 2355
在使用谷歌作为开发项目浏览的浏览器，在使用了谷歌翻译之后，vue数据改变后，页面不重新渲染。 问题猜测：1. 由于使用谷歌翻译只有，页面的dom发生改变，导致vue找不到对应的dmo 2. 翻译之后，dmo已经发生改变，别默认为页面已发生改变，所以不重新渲染 解决方法:1. 设置 <html lang="zh"> 避免被默认翻译，...
google翻译导致站点出现奇怪问题
pan-zy的专栏
08-10 1020
如果使用谷歌翻译的话，有时候会出现文字错误，数据不对, 甚至功能异常的现象. 我们项目就遇到了这个问题. "google翻译"为什么可能会导致网页功能异常? 因为google翻译会导致html结构发生变化 看这个button的原始的html结构 使用google翻译之后的html结构 问题与解决方案: 问题一: 如果网页的语言与浏览器的语言不一致时,就会出现"google翻译"的图标 将网页设置正确的区域语言 <!-- 如果是英文网站 --> <html lang="en">
chrome内核浏览器，排版错位
WebDog—王西西
03-31 1万+
用 SemanticUi 做的长表单dialog，限于显示器分辨率的大小，往往只能看到一半的内容，再往下就需要滚动显示。 然而，由于验证信息，表单项目的插入等影响，可见部分的元素高度可能往下挤压。这使得表单总高度变长。 当你理所当然的以为，不可见部分的元素会被自动向下滚动，你会发现，部分元素，还处于未被 挤压之前的一个状态。我们会看到一个错位的排版。 这时点击表单任何位置，所有元素排版又会正常
chrome浏览器页面错位
liu5672934shuai的专栏
04-10 4908
不作不死 今天把以前的老项目删了，从svn上下了一个新的，发现左边的菜单栏和右边的子页面错位。如图： 发现线上的项目木有问题，然后又看代码是不是jquery重复引用等等，发现木有问题。最后用IE打开发现好好的 开始以为是不兼容。后来发现是Ctrl加鼠标滚轮缩放页面造成的。只要回复默认设置就OK。
HTML应用指南：利用GET请求获取全国瑞思教育门店位置信息
最新发布
weixin_45812624的博客
12-11 2399
本文介绍了基于Python的自动化数据采集与分析技术在教育机构线下布局研究中的应用实践。通过调用瑞思教育公开API接口，利用requests库发起HTTP GET请求，分阶段获取全国校区的结构化数据，包括校区名称、地址、经纬度、等关键字段；随后借助pandas进行数据清洗、整合与持久化存储为CSV格式；针对地理坐标存在的GCJ-02偏移问题，进一步引入坐标系转换技术以适配WGS-84标准，确保后续在ArcGIS等平台中的空间可视化准确性。该技术流程不仅高效还原了瑞思教育“东密西疏、核心集聚”的门店分布格局。
解决Google Chrome自动填充问题的jquery.disableAutoFill插件
Google Chrome浏览器提供了一个方便的自动填充功能，它可以保存用户的个人信息，如姓名、地址、电话号码以及电子邮件地址等，并在用户下次填写表单时自动填充这些信息，从而提高填写表单的效率。Chrome的自动完成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值