Question

如果有人可以立即指引我到正确的地方，我道歉，但我不确定甚至可以搜索这个特定的问题。它似乎是特定于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;
}

Answer 1

这是因为你将div浮动到左边。删除浮动，因为您已经声明inline-block

，所以不需要它

DEMO http://jsfiddle.net/kevinPHPkevin/Sj3Gj/5/

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

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

1 个答案: