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/