Question

谷歌翻译似乎正在改变我的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

不要使用跨度来包裹元素。 label内不允许使用span。这是无效的HTML，因此容易导致错误。

据我所知，直接将<span class="box_content-form-data">改为<div>解决了问题。见here

- 根据您的上一条评论，spans的重要性也计入labels。它们并不意味着嵌套很多元素。

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

Answer 2

不使用跨度，只需使用标签即可。似乎谷歌翻译奇怪地处理了<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>

Answer 3

虽然我无法找到阻止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;
}

Answer 4

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

如何阻止Google翻译更改网页的html结构？

4 个答案: