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