div之外的contenteditable div光标

I have a div that has the attribute contenteditable="true" it works, but chrome (Ubuntu 14.04) places the cursor outside of the div as seen in this image:

我有一个div具有属性contenteditable =“true”它可以工作，但chrome（Ubuntu 14.04）将光标放在div之外，如下图所示：

Why is it doing that? I am using this html (with smarty):

它为什么这样做？我正在使用这个HTML（聪明）：

<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>

I am using this for the css:

我用这个用于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;
}

Is this a chrome bug, or is this something I can fix, and how?

这是一个铬虫，或者这是我能解决的问题，以及如何解决？

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

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

1 个解决方案

#1

I was able to solve the issue by adding an input-group to the form control, like so:

我能够通过向表单控件添加一个输入组来解决这个问题，如下所示：

<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>

You can see the fiddle here: http://jsfiddle.net/y3ms3f7a/5/

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