谷歌浏览器自动翻译导致页面错位等问题，因翻译强行注入样式、修改DOM并覆盖CSS权重；可禁用当前网站翻译、关闭全局翻译功能、添加meta标签notranslate、用MutationObserver还原样式、设置translate="no"属性或通过Content-Language响应头声明语言。
谷歌浏览器自动翻译网页后，前端页面元素错位、文字重叠、按钮消失、布局塌陷，是因为翻译过程强行注入内联样式、修改 DOM 结构并覆盖原始 CSS 选择器权重，尤其对使用 Flex/Grid 布局、CSS 变量或 scoped 样式（如 Vue SFC）的现代前端项目破坏性极强。
禁用当前网页的自动翻译
点击地址栏右侧的“翻译”图标 → 选择「不翻译此网站」→ 刷新页面。
这一步能立即终止后续所有翻译注入行为，但仅对当前域名生效；若该网站含多个子路径（如 example.com/a/ 和 example.com/b/），需分别设置。
彻底关闭 Chrome 全局翻译功能
打开 chrome://settings/languages → 关闭「提供翻译非您所用语言的网页」开关。
立即学习“前端免费学习笔记（深入）”；
关闭后，地址栏不再出现翻译图标，也不会触发任何 DOM 改写。注意：已启用翻译的标签页不会自动退出翻译状态，需手动点击「撤销翻译」或刷新。
开发者临时绕过翻译的 HTML 方案
在网页 中插入以下 meta 标签：
<meta name="google" content="notranslate">
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
该声明会阻止 Google Translate 对整个页面发起翻译请求，Chrome 检测到后直接跳过翻译流程。必须放在 最前面，且不能被 JavaScript 动态插入——动态插入无效。
【content 属性值必须为 notranslate，大小写敏感，写成 NoTranslate 或 notranslatee 均失效】
针对 Vue/React 项目的运行时防护
方法一：监听 DOM 变化并还原关键样式
在 mounted / useEffect 中添加 MutationObserver，监控 body 下是否新增了 translate-content 类或 style="transform: translateX(0)" 等典型翻译注入样式，一旦发现，立即移除对应节点的 style 属性或重置 classList。
方法二：强制锁定根容器渲染模式
给 或 添加 translate="no" 属性，并配合 CSS 规则：[translate="no"] * { will-change: auto !important; transform: none !important; }。该属性是 W3C 标准，Chrome 翻译引擎会识别并降低干预强度。
方法三：服务端响应头声明
后端返回 HTTP 响应头：X-Frame-Options: DENY 不相关，真正有效的是 Content-Language: zh-CN + Vary: Accept-Language，再配合 。当 Chrome 检测到明确的语言声明且与用户界面语言一致时，大概率跳过翻译提示。
