Firefox中span元素contenteditable无法输入问题及解决

我在为Web应用实现自定义输入指令时碰到了跨浏览器兼容问题：

原始HTML结构：

<div class="variable-input-container" style="width: 100%;">
  <div class="var-input" tabindex="0">
    <span class="var-input-span" contenteditable="true"></span>
  </div>
  <!-- Additional Elements here -->
</div>

对应的CSS：

.variable-input-container {
    display: flex;
    flex-direction: row;
    position: relative;
}
.var-input {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    height: 34px;
    border: 1px solid #cfcfcf;
    padding: 6px 12px;
    padding-left: 14px;
}
.var-input:hover {
    cursor: text;
}
.var-input-span {
    outline: none;
}

这个结构在Chrome里能正常作为输入框使用（会自动添加包含文本的子span元素），但在Firefox里选中元素后看不到光标，完全无法输入内容。只有给主span添加用于显示带样式变量的子span时，才能正常输入。

后来参考CBroes的方案调整了CSS，将span设置为inline-block并让它填充父容器后，问题得到解决：

调整后的CSS：

.var-input {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    height: 34px;
    border: 1px solid #cfcfcf;
}
.var-input-span {
    padding: 6px 12px;
    padding-left: 14px;
    width: 100%;
    display: inline-block;
    outline: none;
}

有没有人也遇到过这类Firefox下contenteditable的兼容问题？

内容的提问来源于stack exchange，提问作者Sigmarod