html - スパンのテキストを変更すると、親要素が左に移動します

Question

誰かがすぐに正しい場所に案内してくれたら申し訳ありませんが、この特定の問題を何を検索すればよいかわかりません. Chrome 固有のバグのようですが、修正方法がわかりません。

何が起こっているかというと、スパン内のテキストを置き換えると、(グランド) 親アンカーが左に移動します。(デモについては fiddle を参照してください: http://jsfiddle.net/Sj3Gj/2/ ) HTML を単純化しましたが、さまざまな理由から、これが必要な構造/CSS です。float: left をアンカー要素に配置すると正常に機能しますが、この構造をより大きな構造に持っており、この追加の float はより大きな構造の配置を壊します。

私はここで完全に途方に暮れています。chromeでフィドルを見るとアンカーが左に浮いていますが、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;
}