4

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

发生的事情是，当我替换跨度中的文本时，它会将（大）父锚点向左移动。（参见小提琴演示： http: //jsfiddle.net/Sj3Gj/2/）我已经简化了 HTML，但由于各种原因，这是我需要的结构/CSS。如果你把 float: left 放在锚元素上，它工作正常，但我有一个更大的结构，这个额外的浮动打破了更大结构的定位。

我在这里完全不知所措。如果您查看 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;
}
4

1 回答 1

2

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

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

div{
    background-image: url('http://placekitten.com/200/300');
    height: 16px;
    width: 16px;
    display: inline-block;
}
于 2013-08-06T20:29:22.340 回答