Bootstrap 模式中的 TinyMCE 与 Google 翻译冲突答案

【问题标题】：TinyMCE in Bootstrap modal conflicting with Google TranslateBootstrap 模式中的 TinyMCE 与 Google 翻译冲突
【发布时间】：2015-11-30 03:24:06
【问题描述】：

当 TinyMCE 处于 Twitter Bootstrap 模式时，TinyMCE 与 Google 翻译小部件发生冲突。使用每个版本的最新版本时会发生这种情况。具体来说，发生的事情是下拉菜单的位置太高了。这可以在JSFiddle 中看到。

我不确定这是否可以修复，但我想确定导致此冲突的原因以及如何在不完全删除 Google 翻译小部件的情况下解决它。

我用来初始化 Google 翻译小部件的代码是：

<!-- Google Translate -->
<script>function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:"en",floatPosition:google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT})}</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

【问题讨论】：

标签： javascript jquery twitter-bootstrap tinymce google-translate

【解决方案1】：

我无法完全了解它，但在我正在处理的网站上找到了解决同一问题的可行解决方案。似乎 TinyMCE 脚本正在相对于视口正确设置下拉元素上的 CSS“顶部”属性，但与谷歌翻译注入的 CSS 存在一些冲突，即放置的绝对（顶部）定位向下菜单应用于文档而不是视口或窗口。

我实现的解决方法是将模态窗口设置为相对定位而不是固定打开，用

覆盖 .modal 类

.modal {position:relative!important}

在

https://jsfiddle.net/b4etnbvc/1/

同样，这不是一个解决方案，而是一种解决方法，但我想我会分享我到目前为止的想法。

【讨论】：

所以我看了一下，它解决了一些问题。尽管如此，下拉菜单总是在它应该在的左侧 2px 处。我做了很多测试，它本身与任何资源（CSS、JS 等）无关。但是当谷歌翻译类被创建时，问题就出现了。这可以通过延迟类的实例化但仍然加载之前的所有资源来看到。
我还查看了谷歌的代码，似乎没有什么会导致这个问题。老实说，我对这个问题感到很困惑。

【解决方案2】：

几个月后，我发现了问题和一个老套的解决方案。问题是谷歌翻译将body标签的CSS设置为position: relative;，以及其他规则。这就是导致下拉定位问题的原因。

为了修复它（因为我使用的是 jQuery），我添加了以下代码：

<script>
$(document).ready(function(){
    setTimeout(function(){
        $("body").css("position", "");
    }, 1000);
});
</script>

我承认，这有点 hacky，但它可以完成工作并且似乎对 Google 翻译的功能没有影响。

【讨论】：