元素与`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，但问题仍然存在。下图是问题的表示。