使用div contenteditable

Question

我被迫使用<div contenteditable="true" class="div-contenteditable"></div>，它在Firefox为空时将光标定位在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 ans 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：块， 我几乎没有遇到任何要设置边距的问题，它对所有浏览器都有效