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; 
} 

小提琴here

感谢您的帮助

Answer 1

添加display: inline-block跨越

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