使用div contenteditable在Firefox中结束光标位置

Question

我被迫使用<div contenteditable="true" class="div-contenteditable"></div>，当它为空时将光标位置放在Firefox的末尾，只有在第一次点击时才会出现问题，第二次点击到同一个div，光标会回到起始位置.

当我在里面写一些内容并删除完整的文本时，在该div之外单击并再次单击它，我再次面对该问题。键入时，光标会自动修复其位置并设置到正确的位置。我写的Css是

.div-contenteditable {
    height: auto;
    padding: 10px;
    width: 100%;
    border: unset;
    display: block;
    word-wrap: break-word;
    position: relative;
    -moz-user-select: text;
    cursor: pointer;
    min-height: 41px;
}

.div-contenteditable:before {
    content: "\feff";
}

我正在使用display：block;因为在Safari中使用inline-block会使光标大小大于div。

我尝试在div元素开始和结束之前添加‌，然后div向下移动一点然后我没有在FF中得到光标问题。我尝试在div中添加<br />，但它没有解决FF问题。请帮助我，因为我是HTML和CSS的新手

.div-contenteditable {
    height: auto;
    padding: 10px;
    width: 100%;
    border: unset;
    display: block;
    word-wrap: break-word;
    position: relative;
    -moz-user-select: text;
    cursor: pointer;
    min-height: 41px;
}

.div-contenteditable:before {
    content: "\feff";
}

<table> <thead> <tr> <th>English</th> </tr> </thead> <tbody> <tr><td><div contenteditable="true" class="div-contenteditable"></div></td></tbody> </table>

Answer 1

我使用display：block工作，我在边缘方面遇到了很少的问题，也设置了保证金，它适用于所有浏览器