jquery - 光标在 contenteditable : size and position

Question

空的 contenteditable div 中的光标具有奇怪的行为。在 Safari 和 Firefox 中，它太大而且不在其位置。它在 Chrome 中运行良好。我无法办理登机手续。

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

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

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

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

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

Answer 1

据我所知，我在 Firefox 上编写 WYSIWYG 编辑器时遇到过这个问题。如果你写了一些东西，然后选择所有内容(按 Ctlr+a)并删除它问题就消失了。如果您在此操作后检查编辑器内容，您会发现 <br>标签。下面的解决方法使用了这个事实，并在一开始就把它放在:

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

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

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