html - 更改跨度的文本会将父元素向左移动

Question

如果有人可以立即将我引导到正确的位置，我深表歉意，但我什至不确定要搜索这个特定问题的内容。这似乎是 Chrome 特有的错误，但我不确定如何修复它。

发生的事情是，当我替换跨度中的文本时，它会将(祖)父 anchor 移动到左侧。 (请参阅演示 fiddle :http://jsfiddle.net/Sj3Gj/2/)我已经简化了 HTML，但出于各种原因，这是我需要的结构/CSS。如果你把 float: left 放在 anchor 元素上，它工作正常，但我有一个更大的结构，这个额外的 float 打破了更大结构的定位。

我在这里完全不知所措。如果你在 chrome 中看 fiddle ， anchor 向左浮动，但在 Firefox/IE 中，它很好。有什么想法吗？

这是我的代码:

<a class="trigger">
    <div></div>
    <span>Some text</span>
</a>

a.trigger {
    width: 337px;
    height: 16px;
    padding: 2px 20px 2px 5px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.trigger, a.trigger:link, a.trigger:visited {
    display: inline-block;
    border: 1px solid;
    border-top-color: #BFD6F1;
    border-left-color: #BFD6F1;
    border-bottom-color: #9EBCE1;
    border-right-color: #9EBCE1;
    padding: 2px 18px 2px 7px;
    background-color: #FFF;
    text-decoration: none;
    cursor: pointer;
}

div{
    background-image: url('http://placekitten.com/200/300');
    height: 16px;
    width: 16px;
    display: inline-block;
    float: left;
}
a.trigger span {
    margin-left: 10px;
}
a.trigger, a.trigger:link, a.trigger:visited {
    cursor: pointer;
}

Answer 1

这是因为您将 div 向左浮动。删除 float ，不需要它，因为您已经声明了 inline-block

演示 http://jsfiddle.net/kevinPHPkevin/Sj3Gj/5/

div{
    background-image: url('http://placekitten.com/200/300');
    height: 16px;
    width: 16px;
    display: inline-block;
}