谷歌浏览器翻译导致排版错乱是因译文注入破坏html结构与css作用域；可通过无痕模式临时绕过、关闭全局/单站自动翻译、前端添加translate="no"属性、声明正确lang值或替换为bing翻译插件解决。
谷歌浏览器自动翻译外文网页后，页面文字位置偏移、按钮消失、表格数据错位、输入框无法聚焦，甚至整个布局塌陷，这类排版错乱问题并非渲染异常，而是翻译引擎强行注入译文时破坏了原始HTML结构与CSS作用域导致的。
立即止损：用无痕模式临时绕过翻译
打开一个新标签页 → 地址栏输入 chrome://newtab → 按 Ctrl + Shift + N（Windows/Linux）或 Cmd + Shift + N（Mac）启动无痕窗口 → 在该窗口中访问目标网页。无痕模式默认禁用所有扩展且不加载历史翻译偏好，可立刻验证是否为翻译功能引发的错乱。
这一步操作起来很简单，直接新开窗口就行，无需修改任何设置，适合急需查看正确页面内容的场景。
永久禁用自动翻译（全局+单站）
方法一：关闭全局自动翻译开关
点击右上角三个点 → 【设置】→ 左侧【语言】→ 找到“提供非您所用语言的网页翻译”开关 → 【关闭它】。此操作会彻底停用底部提示栏和自动触发逻辑，但保留右键“翻译成中文”手动选项。
方法二：对特定网站永久禁用翻译
当某英文站点（如 https://docs.rs）反复错乱时，首次访问该站 → 出现底部翻译提示栏 → 点击右侧“更多”图标（⋮）→ 选择【永不翻译此网站】。Chrome 会将该域名写入本地屏蔽列表，后续访问不再尝试识别语言或注入译文。
注意：若已出现错乱，需先刷新页面再执行此操作；否则浏览器仍按缓存中的“已翻译”状态渲染，禁用指令不会回滚已破坏的DOM。
前端代码级防护（开发者适用）
第一步：在 标签中添加 【translate="no"】
修改网页源码，在根元素增加属性：。该属性会阻止 Chrome 对整个文档树执行自动翻译，包括所有子元素文本节点，是W3C标准支持的硬性禁用方式。
第二步：为关键区域单独加锁
对表格、表单、代码块等易错乱区块，添加 translate="no" 属性，例如：<table translate="no"><tr><td>ID</td></tr></table>。即使页面其他部分被翻译，这些区块内文字保持原样，布局锚点不被篡改。
第三步：显式声明页面语言
确保 中的 【lang 值与实际内容语言一致】。若页面本就是中文，却设为 lang="en"，Chrome 会误判为“需翻译成中文”，强行覆盖原文——这是很多后台管理系统错乱的根源。
替换翻译引擎：安装 Bing 内核插件
访问 Chrome 网上应用店 → 搜索“Microsoft Translator” → 安装官方扩展 → 点击工具栏拼图图标启用 → 右键网页空白处 → 选择“使用 Microsoft Translator 翻译”。该插件不修改原始 DOM，而是通过浮动层叠加译文，完全规避 HTML 结构污染问题。
它调用的是必应翻译 API，国内直连稳定，响应快，且支持整页/划词/截图三种模式。对于开发环境、客服系统、ERP 页面等严禁 DOM 变动的场景，这是最安全的替代方案。
