Chrome令人满意的插入符号

Question

我在使用contenteditable for Chrome时遇到问题。我在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;
}

小提琴here

感谢您的帮助

Answer 1

将display: inline-block添加到范围

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