TinyMCE颜色选择器下拉列表出现在屏幕外

Question

到目前为止,这是Firefox和IE的一个问题我已经测试过; Chrome上不存在此问题.

我在一个页面上包含两个TinyMCE编辑器,其中一个部分在屏幕外启动.当我color picker从第一个TinyMCE实例的工具栏中选择下拉选项时,下拉列表会显示在应该的位置.但是,如果我向下滚动,并选择color picker在下拉二审中,出现下拉列表编辑方式下面,通常关闭页面.

你可以在这里看到这个:http://jsfiddle.net/nm6wtca3/

在不删除html, bodyCSS的情况下,如何让颜色选择器始终显示在正确的位置？

我已经将问题追溯到在html, body元素上设置CSS .

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

dropdown div具有应用于它的CSS,由TinyMCE自动计算.它看起来像这样:

z-index: 65535; 
left: 641.467px; 
top: 633px; 
width: 162px; 
height: 105px;

它在FF中的表现(有时候会更糟): 它是如何出现在FF的

它在Chrome中的显示方式(它应该如何显示): 它在Chrome中的显示方式(应该如何显示)

Answer 1

您确实说过您不想从中删除任何 CSS html,body，但您没有说要添加任何 CSS！该解决方案基于这样的假设：您可以添加到html,body

解决方案

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    position: relative; /* Line added */
}

我希望这有帮助。事实上，你只需要position: relative;像这样涂抹在身体上body { position: relative; }