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

Question

在div上使用contenteditable属性并插入跨度的html元素时，由于某种原因，插入符号会在跨度旁边更改位置。

因此您可以看到插入符号已被向上推：

什么是控制插入符号位置的信息，我必须用什么机制对其进行更改？

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>

Answer 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>