Javascript 引导模式中的TinyMCE与Google Translate冲突

当TinyMCE处于Twitter引导模式时，TinyMCE与Google Translate小部件冲突。这在使用每个版本的最新版本时发生。具体来说，出现的情况是下拉菜单的位置太高。这一点可以从中看出

我不确定这是否可以修复，但我想确定是什么导致了这一冲突，以及如何在不完全删除Google Translate小部件的情况下解决这一冲突

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

函数googleTranslateElementInit（）{new google.translate.TranslateElement（{pageLanguage:“en”，floatPosition:google.translate.TranslateElement.floatPosition.BOTTOM_RIGHT}}

我无法完全弄清问题的真相，但在我正在工作的网站上找到了解决同一问题的可行方案。TinyMCE脚本似乎正确设置了与视口相关的下拉元素的CSS“top”属性，但与Google Translate注入的CSS存在一些冲突，即下拉菜单的绝对（顶部）位置应用于文档，而不是视口或窗口

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

.modal{位置：相对！重要}

截至

---

同样，这与其说是一个解决方案，不如说是一个变通方法，但我想我会与大家分享我迄今为止的想法。

几个月后，我发现了这个问题，并找到了一个老套的解决方案。问题是Google Translate将

body

标签的CSS设置为

位置：relative，以及其他规则。这就是导致下拉定位问题的原因

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

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


$（文档）.ready（函数（）{
setTimeout（函数（）{
$（“body”）.css（“position”，”）；
}, 1000);
});

我承认，这有点黑客，但它完成了任务，似乎对谷歌翻译的功能没有影响。
所以我看了一下，它解决了一些问题。尽管如此，下拉列表始终位于它应该位于的左侧2倍处。我做了很多测试，这与任何资源（CSS、JS等）无关。但是当GoogleTranslate类被创建时，问题就出现了。这可以通过延迟类的实例化而看出，但在此之前仍然加载所有的资源。我还查看了Google的代码，似乎没有任何东西会导致这个问题。老实说，我对这个问题相当困惑。
<script>
$(document).ready(function(){
    setTimeout(function(){
        $("body").css("position", "");
    }, 1000);
});
</script>