Firefox中可满足的光标位置/样式

StackOverflow https://stackoverflow.com/questions/1987435

题

我在Firefox 3中使用可满足的3.我遇到了一个问题，在我单击它之后，光标将出现在上方或仅部分出现在DIV中（直到我开始键入该时间正确的行为）。关于如何阻止这种情况发生的任何想法？

html：

<html>
  <head><title>Test Page</title></head>
  <body>
    <div id="editor" style="position:absolute; left:157px; top:230px; width:120px; height:30px">
      <div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true"> </div>
    </div>
  </body>
</html>

alt text

有帮助吗？

解决方案 6

我等待并使用了仅在Firefox 4及更高版本中编辑的内容。我提出了此事，以及Mozilla团队为FF 4修复的其他一些错误。

其他提示

我在Firefox 37.0.2上遇到了完全相同的问题。在可满足的内容中放置零宽度空间：在伪元素解决问题之前：

.contenteditable:empty:before {
  content: "\200B";
  display: inline;
}

该修复程序在包括IE11在内的所有现代浏览器中都可以使用，该浏览器的位置问题也与Firefox的问题非常相似。

您需要在需要编辑的DIV之间放置某种内容或HTML：

<div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true">Some sort of content or HTML here.</div>

我花了几个小时的时间嘎嘎作响，试图找到一种解决这个问题的方法。我想到的是将编辑器包裹在默认情况下隐藏的DIV中。然后使用一些内联JavaScript显示DIV。这似乎使光标跳入正确的位置。它很脏，但它起作用了！

<div id="editor" style="display: none;">
     <% call RTE.renderTextArea(true) %>
</div>

<script>document.getElementById("editor").style.display="";</script>

我还在最新版本的FF 22中遇到了这个问题。在我的情况下，我的外部div（例如上述编辑器）没有高度，而我的光标位置则低于可满足的div。通过为外部提供高度，例如 height: 1.5em;, ，光标正确定位。

可以通过创建盲目的div来解决，然后将焦点添加到它，然后您的浏览器不专注于可满足的元素，但是用户应该单击该元素，并且该情况在正确的位置显示了光标。

$(document).ready(function(){
    $("#target_blind").focus();
});

<div id="target_blind" style="display:none;"></div>
<div id="target" contenteditable="true"></div>

有一种方法，但是它不能解决问题，只能聪明。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top