Я вынужден использовать <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 использование встроенного блока делает размер курсора больше, чем div.
Я попытался добавить ‌ до начала и конца элемента div, затем div немного смещается вниз, и тогда я не получаю проблему с курсором в FF. Я попытался добавить <br /> внутри div, но это не решило проблему с 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>