title: div as contenteditable: cursor is located below the div
body: <p>I have a div that I defined it as contenteditable (behaves like an input).</p>
  
  <p>I'm trying to write something so I click with the mouse within the div:</p>
  
  <p>On chrome: everything is OK, the cursor is located in the div.</p>
  
  <p>On Firefox: strange behavoir, the cursor is located below the div. <strong>After you write something, it's fixed</strong>.</p>
  
  <p>I'm trying to make firefox to work as chrome.</p>
  
  <p>This is the link:</p>
  
  <p><a href="http://jsfiddle.net/h3WDq/730/" rel="nofollow">http://jsfiddle.net/h3WDq/730/</a></p>
  
  <p>This is my div:</p>
  
  <pre><code>&lt;div class="divAsInput" contenteditable="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And this is the css:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Please open it on Chrome and Firefox and click the mouse withing the div..</p>
  
  <p>Any help appreciated!</p>