css - 具有“contenteditable”的元素显示奇怪的光标位置

Question

我正在使用一个慷慨contenteditable的h1元素line-height。当我尝试编辑 时h1，我必须将光标定位在元素边界的最顶部。我希望能够直接单击元素并编辑它的文本。

HTML：

   <div>
     <h1 contenteditable="true">Edit Me</h1>
   </div>

CSS：

  h1 { 
      font: 16px/48px Helvetica, Arial, sans-serif;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
     }

我已经尝试减少line-height，但问题仍然存在。下图是问题的表示。