谷歌网站翻译器弄乱了 HTML答案

【问题标题】：Google Website Translator messes up HTML谷歌网站翻译器弄乱了 HTML
【发布时间】：2016-02-25 22:06:29
【问题描述】：

在使用 Google 网站翻译器测试我的网站时，我注意到 Google 正在更改我页面的 HTML 结构，导致 CSS 样式未被应用。

比如这段HTML（使用Bootstrap）：

<ul class="nav nav-pills nav-stacked">
    <li class="active">
        <a title="About us" href="/about/">About us</a>
    </li>
</ul>

改成这样的格式：

<ul class="nav nav-pills nav-stacked">
    <li class="active">
        <span class="notranslate" onmouseout="_tipoff()" onmouseover="_tipon(this)">
            <span class="google-src-text" style="direction: ltr; text-align: left">
                <a title="About us" href="...">Over ons</a>
            </span>
            <a title="About us" href="...">About us</a>
        </span>
    </li>
</ul>

基本上，我的链接由<SPAN> 包装。我怎样才能避免这种情况？

更新：

即使这些元素不是链接，Google 网站翻译器也会删除包裹在 SVGs 周围的 SPANs。很奇怪。例如：

<div>
    <span>
        <svg>...</svg>
    </span>
</div>

变成：

<div>
    <svg>...</svg>
</div>

【问题讨论】：

标签： google-translate

【解决方案1】：

这是 Google 翻译的原生方面。最好放入一些 CSS 来修复任何损坏。

【讨论】：

【解决方案2】：

我找到了一个专门针对 Google 网站翻译器的修复程序，如下所示。

我已经改变了这个：

nav > li > a {
....
}

进入这个：

nav > li > a,
nav > li > span.notranslate > a {
...
}

【讨论】：