jquery - Chrome contenteditable 插入符号对齐

Question

我在为 Chrome 使用 contenteditable 时遇到问题。我在 span 的 onmouseover 事件上使用了 contenteditable 属性和一些填充。当跨度集中（编辑）时，插入符号在 Chrome 中测试时与跨度的底部边框对齐，在 Firefox 上很好。

HTML

<div>
    Some <span onmouseover="this.contentEditable=true;">Editable</span> Text
</div>

CSS

[contenteditable]:focus {
    background: rgba(255,220,0,0.3);
    padding: 10px;
}

在这里提琴

感谢您的任何帮助

Answer 1

添加display: inline-block到跨度

[contenteditable]:focus {
    background: rgba(255,220,0,0.3);
    padding: 10px; 
    display: inline-block;
}