<div></p>错误标签嵌套致布局异常，谷歌分段翻译适配方案求助

嘿，这个问题挺有意思的，我来帮你拆解下背后的原因，再给你几个合规的修复方案：

为什么错误标签嵌套才生效？ #

核心原因是浏览器对无效HTML的自动修正和谷歌翻译SectionalElement的DOM识别逻辑撞在了一起：

1. 当你写下<div>Тестирование</p>这种错误嵌套时，浏览器会自动修正这个无效代码：它会先闭合未匹配的<div>（因为</p>没法关闭<div>），然后忽略那个无对应打开标签的</p>。
2. 谷歌翻译的SectionalElement脚本可能存在旧逻辑限制：它默认只会翻译直接属于目标节点（这里是带translate类的<body>）的文本节点，不会主动遍历嵌套的块级元素（比如正常的<p>或<div>）。
3. 错误标签被浏览器修正后，意外改变了文本节点的层级（或者脚本错误识别了这个“不规范”的元素），反而触发了翻译逻辑；而完全合规的标签结构里，文本被包裹在子元素中，脚本没有遍历这些子元素的逻辑，所以翻译不生效。

合规的修复方案 #

不需要依赖错误的标签嵌套，这三个方案都能解决问题：

方案1：把翻译类直接加在文本容器上 #

不要把translate类放在<body>上，而是直接绑定到包含可翻译文本的元素上，让谷歌翻译精准定位目标内容：

<html>
<head>
  <title>My Page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
  <!-- 把translate类直接加在文本容器上 -->
  <div class="translate">Тестирование</div>
  <div class="translate_control" lang="en"></div>
  <script>
    function googleSectionalElementInit() {
      new google.translate.SectionalElement({
        sectionalNodeClassName: 'translate',
        controlNodeClassName: 'translate_control',
        background: '#f4fa58'
      }, 'google_sectional_element');
    }
  </script>
  <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</body>
</html>

方案2：改用谷歌翻译全局小部件 #

如果不需要只翻译页面中的某一部分，直接用全局翻译小部件更稳定，完全避免SectionalElement的限制：

<html>
<head>
  <title>My Page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="text/javascript">
    function googleTranslateElementInit() {
      // 配置源语言为俄语，目标语言包含英语
      new google.translate.TranslateElement({pageLanguage: 'ru', includedLanguages: 'en'}, 'google_translate_element');
    }
  </script>
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
  <div id="google_translate_element"></div>
  <p>Тестирование</p>
</body>
</html>

方案3：调整DOM结构让文本成为目标节点的直接子元素 #

如果必须保留<body>上的translate类，那就把可翻译文本直接放在<body>下，不要嵌套在其他块级元素里：

<html>
<head>
  <title>My Page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="translate">
  <!-- 文本直接作为body的子节点 -->
  Тестирование
  <div class="translate_control" lang="en"></div>
  <script>
    function googleSectionalElementInit() {
      new google.translate.SectionalElement({
        sectionalNodeClassName: 'translate',
        controlNodeClassName: 'translate_control',
        background: '#f4fa58'
      }, 'google_sectional_element');
    }
  </script>
  <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</body>
</html>

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