CONTENTEDITABLE格光标DIV

Question

之外我有了contenteditable="true"它的工作属性的div中，但铬（Ubuntu的14.04）将光标股利之外，因为这图所示：

为什么它是这样做的吗？我使用这个网站（使用Smarty）：

<div class="col-sm-6"> 
    <div class="form-control" contenteditable="true" id="tags"> 
     <div contenteditable="false" class="tag">one <a href="" class="glyphicon glyphicon-remove"></a></div> 
     <div contenteditable="false" class="tag">two <a href="" class="glyphicon glyphicon-remove"></a></div> 
    </div> 
</div> 

我用这对CSS：

.tag{ 
    background-color: #01b6ef; 
    color: #012935; 
    display: inline-block; 
    padding: 1px 5px; 
    margin-right: 3px; 
} 

.tag a{ 
    color: #ffffff; 
    margin-left: 5px; 
    font-size: 12px; 
} 
.tag a:hover{ 
    color: #ffffff; 
} 

这是Chrome错误，或者是这个东西我可以修复，又如何呢？

http://jsfiddle.net/y3ms3f7a/1/

Answer 1

我能够通过添加input-group到表单控件来解决这个问题，比如：

<div class="col-sm-6"> 
    <div class="form-control" contenteditable="true" id="tags"> 
     <div class="input-group"> 
      <div contenteditable="false" class="tag">one <a href="" class="glyphicon glyphicon-remove"></a></div> 
      <div contenteditable="false" class="tag">two <a href="" class="glyphicon glyphicon-remove"></a></div> 
     </div> 
    </div> 
</div> 

你可以在这里看到小提琴：http://jsfiddle.net/y3ms3f7a/5/