如何防止 Google Translate 更改我页面的 html 结构？

Question

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>

Answer 1

在这里。工作示例：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;
}

Answer 2

不使用 span，只使用标签。 <span> 标签似乎被 google 翻译奇怪地对待了。

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

这是fiddle：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>

Answer 3

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

从字面上将您的 <span class="box_content-form-data"> 更改为 <div> 据我所知解决了这个问题。参见 here

-- 根据您最后的评论，spans 的重要内容也对 labels 重要。它们不适合嵌套大量元素。

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

Answer 4

尽管我无法找到一种方法来阻止 Google 更改 HTML、here is how I handled it and it seems to work just fine.

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

<!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;
}

如何防止 Google Translate 更改我页面的 html 结构？

How can I prevent Google Translate from changing the html structure of my page?

html

css

google-translate

translate