如何防止谷歌翻译改变我页面的 html 结构？
Posted
技术标签:
【中文标题】如何防止谷歌翻译改变我页面的 html 结构？【英文标题】：How can I prevent Google Translate from changing the html structure of my page? 【发布时间】：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。
【参考方案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。我看起来像更改为标签元素仅适用于孤立的示例。以上是关于如何防止谷歌翻译改变我页面的 html 结构？的主要内容，如果未能解决你的问题，请参考以下文章