如何防止谷歌翻译改变我页面的 html 结构？答案

【问题标题】：How can I prevent Google Translate from changing the html structure of my page?如何防止谷歌翻译改变我页面的 html 结构？
【发布时间】：2018-07-18 03:37:04
【问题描述】：

Google 翻译似乎正在更改我的 html，将我的星号移到新行。

这是一个活生生的例子：jsbin

我怎样才能避免这种情况？

翻译前：

翻译成西班牙语后：

JS：

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
    autoDisplay: false
  }, 'google_translate_element');
}

CSS：

.box_content-form-data {
  clear: both;
  float: left;
}

HTML：

<div id="google_translate_element"></div>
<span style="clear:both; float:left;">Enter your email account.</span>
<span class="box_content-form-data">
          <label>Email Address:
              <span style="color:red;">*</span>
</label>
</span>

【问题讨论】：

@Huangism 它应该在理论上可行，对吧？我想支持多种语言，但没有资源翻译成那么多语言。
这不是那么准确，我建议您只使用您网站的 2 种主要语言。如果人们真的想要其他语言，他们可以使用 chrome，它会自行提供翻译
@Huangism 不幸的是，我别无选择。我们需要支持尽可能多的语言，并且作为一个团队选择使用谷歌翻译。我们对不准确性很好，但对谷歌翻译破坏我们的 html 不满意。您对它为什么会改变我们网站的结构有任何想法吗？
没有什么原因，我想这就是它的工作原理。我建议您查看 API 页面，看看里面是否有可以使用的东西。例如，您从哪里获得layout: google.translate.TranslateElement.InlineLayout.SIMPLE？该网站应该包含您需要的所有信息
我浏览了这个 gui：translate.google.com/manager/website 在回答了几个问题后，它吐出了一个应该翻译我的网站的代码 sn-p。

标签： html css google-translate translate

【解决方案1】：

不要使用跨度来环绕元素。 label 不允许在 span 中使用。那是无效的 HTML，因此容易导致错误。

据我所知，将您的 <span class="box_content-form-data"> 更改为 <div> 可以解决问题。见here

-- 根据您的最后一条评论，spans 的重要性也适用于 labels。它们不是用来嵌套大量元素的。

http://jsbin.com/botimiwipi/1/edit?html,output

【讨论】：

@JackFairfield 因为您将所有内容都放在label 中。 label 并不意味着作为内联元素以外的任何东西的容器。如果您像我在示例中所做的那样将 box_content-form-data 从 label 更改为 div，它将起作用。
@JackFairfield 在我的回答中添加了另一个工作示例。
非常感谢。我现在看到了。你是神！
@JackFairfield 嗯谢谢啊哈哈。对于程序员来说，这更像是一个可悲的借口，而不是上帝，但我会接受它；）。
我试图给你赏金，它说我必须等待整整 24 小时。

【解决方案2】：

虽然我无法找到阻止 Google 更改 HTML 的方法，here is how I handled it and it seems to work just fine.

我所做的只是从 HTML 中完全删除 *，并将其放入一个伪元素中，并隐藏由谷歌翻译创建的元素之一。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  <title>JS Bin</title>
</head>
<body>
  <div id="google_translate_element"></div>
  <span style="clear:both; float:left;">Enter your email account.</span>
  <span class="box_content-form-data">
      <label class="my-email">Email Address:</label>
  </span>
</body>
</html>

对于 CSS：

.box_content-form-data {
    clear: both;
    float: left;
}

.my-email:after {
  content: "*";
  color: red;
}

font + .box_content-form-data {
  display: none;
}

【讨论】：

其实我之前已经回答过了……但我收回了我的回答，因为我找到了一种更好、更简单、更正确的方法来解决它。

【解决方案3】：

来了。工作示例：http://jsbin.com/gelefonevu/edit?html,css,output

.box_content-form-data {
    clear: both;
    float: left;
}
.box_content-form-data:nth-of-type(2) {
    clear: initial;
}

【讨论】：

不....它仍然不起作用。没有样式可以添加到标签或内部跨度会改变输出，因为谷歌翻译正在改变 html。我真的在寻求一种方法来阻止 Google 翻译以改变元素组织方式的方式更改我的 html。
我只想使用“翻译网站”选项。我不想单独翻译每个 html 元素。我使用了这个 gui：translate.google.com/manager/website/ 最初是为了生成下拉列表以添加到网站。
使用nth-of-type(2) 是一种通常非常不可靠的选择器。通过更改 HTML 很容易破坏它，这意味着您必须根据非常特定的结构工作，而这种结构很容易被谷歌翻译破坏。如果它在这种情况下有效，那就太好了，尽管我建议不要使用那种类型的函数，除非它用于容器中的元素包装器，专门作为单个元素包装器重复。
@Babydead 我没有看到你的工作示例。能发个jsbin吗？
@RonRoyston 看看我的回答，那里有一个jsbin。

【解决方案4】：

不要使用跨度，而是使用标签。谷歌翻译似乎对<span> 标签进行了奇怪的处理。

我假设您将其绑定到一个更适合使用<label> 的表单中。

这里是小提琴：http://jsbin.com/rapusexufu/edit?html,css,output

<label style="clear:both; float:left;">Enter your email account.</label>
<label class="box_content-form-data">Email Address:
    <span style="color:red;">*</span>
</label>

【讨论】：

不幸的是，这在这个非常简单的示例中有效，但是当我尝试使用更大的表单时，它正在做同样的事情。
@JackFairfield 这里是一个实际的 form 元素和四个 input 元素的示例，它仍然有效。 jsbin.com/cayukoxije/edit?html,css,output 请注意，我删除了您的 clear 和 float 样式并将它们替换为 input{ display: block}
查看我更新的 JsBin。我看起来像更改为标签元素仅适用于孤立的示例。