满足的游标：大小和位置

Question

空的contenteditable div中的光标具有异常行为。在Safari和Firefox中，它太大而且不合适。它适用于Chrome。我无法办理登机手续。

我知道如果删除填充和/或内联块，我可以解决它。但我需要这些功能。

首先，我想了解为什么会发生这种情况，然后如果有任何方法可以解决它（使光标的大小和位置与div内的字母相同）

＆＃13;

＆＃13;

$(function(){
	$(".note").focus();	 
})

＆＃13;

.note {
	width:200px;
	text-align:left;
	outline:none;
	padding:10px; 
	display:inline-block;
	background:lightGrey;
	
	font-size:14px;
	cursor:text;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="note" contenteditable="true"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

据我记得，在编写WYSIWYG编辑器时，我在Firefox上遇到了这个问题。如果你写了一些内容，那么选择所有内容（按Ctlr + a）并删除它，问题就会消失。如果您在此操作后检查编辑器内容，则会找到<br>标记。以下解决方法使用了这个事实，最初只是把它放在：

＆＃13;

＆＃13;

$(function(){
	$(".note").focus();	 
})

＆＃13;

.note {
	width:200px;
	text-align:left;
	outline:none;
	padding:10px; 
	display:inline-block;
	background:lightGrey;
	
	font-size:14px;
	cursor:text;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="note" contenteditable="true"><br></div>

＆＃13;

＆＃13;

＆＃13;