Contenteditable <div>：光标在占位符之前启动

Question

我正在制作一个contenteditable div来获取用户输入。我想让占位符文本准确地开始光标所在的位置，但是演示显示占位符文本在光标后面开始2个字符（空格）。知道怎么解决吗？

<div id="comment_box2" contenteditable="true" autofocus="autofocus" autocomplete="off" spellcheck="false" placeholder="this text starts after the cursor"></div>

<style>
/*[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block;  For Firefox 
 }*/

#comment_box2{
  background-color: white;

  /*position:relative;*/
  border: 1px solid blue;
  /*height:60px;*/
  width: 500px;
  padding: 10px;
  color:black;
  border-radius:3px;
  text-indent: 10px;
  font-size:18px;

  /*border-color:yellow;*/
}
#comment_box2:focus{
  outline-style:solid;
  outline-color:blue;
  outline-width:0px;
}
</style>




<script type="text/javascript">
    window.onload = function() {
        document.getElementById("comment_box2").focus();
    };
</script>

Answer 1

删除：text-indent: 10px;

http://jsfiddle.net/cty5cxg7/

在Firefox和Chrome中测试过，运行正常。