鼠标在引导模式中使用 CKEditor 在 Chrome 中选择错误的对象答案

【问题标题】：Mouse is selecting wrong object in Chrome with CKEditor in a Bootstrap modal鼠标在引导模式中使用 CKEditor 在 Chrome 中选择错误的对象
【发布时间】：2016-02-02 17:50:18
【问题描述】：

我正在构建一个 HTML 网页，我遇到了一个问题。为了重现它，我将 CKEditor（用于编辑文本的 jQuery 插件）放在 Bootstrap 模式中，并将 css {direction:rtl;} 提供给正文。
在 Chrome（Firefox/IE 工作正常）中，当窗口很小（即模态的顶部和向下到达主窗口的边界）并且您输入了一个长文本，因此出现了 CKEditor 的滚动条，问题开始出现由模态向右移动，然后鼠标点击不击中在它下的目标非常好。如果要单击模态框内的任何对象，则应单击该对象的左侧。（见图）

（CKEditor：4.5.6 Bootstrap：3.3.5 Chrome：48.0.2564.97）

我不知道为什么下面 sn-p 中的 CKEditor 被禁用，但是如果你将这段代码复制并粘贴到 HTML 文件中，你会看到问题：

body {
            direction: rtl;
        }

<head>
    <title></title>
    <meta charset="utf-8" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  </head>

<body>
    <a href="#dialog1" data-toggle="modal" class="btn btn-default">بیا</a>
    <div class="modal fade" id="dialog1" role="dialog" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <h4>متن برای ترجمه:</h4>
                    <form role="form" method="post" action="#">
                        <textarea class="ckeditor" name="inputText" id="inputText"></textarea>
                    </form>
                </div>
            </div>
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.ckeditor.com/4.5.6/basic/ckeditor.js"></script>

</body>

请帮我看看有什么问题。
非常感谢。

【问题讨论】：

标签： html twitter-bootstrap google-chrome modal-dialog ckeditor

【解决方案1】：

这是我在运行代码 sn-p 时看到的。看起来不错。

如果我遗漏了什么，请告诉我。

【讨论】：

感谢您的关注。正如我所写：“我不知道为什么下面 sn-p 中的 CKEditor 被禁用，但是如果您将此代码复制并粘贴到 HTML 文件中，您会看到问题”，那么您应该输入这么长的文本，以便编辑器的出现滚动条。