div как contenteditable: курсор расположен под div

Question

У меня есть div, который я определил как контент для контента (ведет себя как вход).

Я пытаюсь написать что-то, так что я щелкнуть мышью внутри DIV:

На хроме: все в порядке, курсор находится в DIV.

На Firefox: странное поведение, курсор находится под div. После того, как вы что-то напишите, исправлено.

Я пытаюсь заставить firefox работать как хром.

Это ссылка:

http://jsfiddle.net/h3WDq/730/

Это мой ДИВ:

<div class="divAsInput" contenteditable="true"></div> 

И это CSS:

.divAsInput { 
    word-break: break-all; 
    padding-top: 1em; 
    border: none; 
    padding-bottom: 0; 
    outline: none; 
    outline-style: none; 
    box-shadow: none; 
    border-bottom: 1px solid black; 
} 

Пожалуйста, откройте его в Chrome и Firefox и щелкните мышью с помощью div.

Любая помощь оценена!

Answer 1

кажется, светлячок имеет некоторые проблемы с отступом причиной нет ничего внутри <div> при старте .. как насчет вас попробовать с min-heighthttp://jsfiddle.net/h3WDq/731/

.divAsInput { 
    min-height: 20px; 
    word-break: break-all; 
    border: 1px solid lime; 
}