如何防止插入符号更改内容可编辑 div 中内联 html 元素的大小答案

【问题标题】：How to prevent caret from changing size on inline html element in content editable div如何防止插入符号更改内容可编辑 div 中内联 html 元素的大小
【发布时间】：2020-03-02 19:37:14
【问题描述】：

当在 div 上使用 contenteditable 属性并在其中插入了一个 html 元素 span 时，由于某种原因，插入符号在 span 旁边时会改变位置。

所以你可以看到插入符号已被向上推：

是什么控制插入符号的位置，我必须通过什么机制来改变它？

html：

<div style="resize:none; overflow: auto; border: none" contenteditable="true">
            is your email still <span class="inline-button" contenteditable="false">Email</span>?
</div>

css：

.inline-button {
    background-color: green;
    border: none;
    color: black;
    padding: 4px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    pointer-events: none;
    font-weight: bold;

    font-size:0.8em;
}

.inline-button {
	background-color: green;
	border: none;
	color: black;
	padding: 4px 4px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 5px;
	pointer-events: none;
	font-weight: bold;

	font-size:0.8em;
}

<div style="resize:none; overflow: auto; border: none" contenteditable="true">
			is your email still <span class="inline-button" contenteditable="false">Email</span>?
</div>

【问题讨论】：

标签： html css

【解决方案1】：

这是因为span 上的填充。

.inline-button {
	background-color: green;
	border: none;
	color: black;
	padding: 0px 4px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 5px;
	pointer-events: none;
	font-weight: bold;

	font-size:0.8em;
}

<div style="resize:none; overflow: auto; border: none" contenteditable="true">
			is your email still <span class="inline-button" contenteditable="false">Email</span>?
</div>

【讨论】：

这实际上并不能解决问题，如果去掉问号，您会看到插入符号仍然明显变小。
@Hidden 那是因为 span 内的 font-size 不同。
为什么插入符号会进入跨度内部？有办法解决吗？
@Hidden 不知道。如果你弄明白了，请发表评论；）。