html - 溢出:隐藏不能始终如一地工作

Question

我正在研究一些按钮。我想要一个翻转状态，我在一个 div 的图像中有这个，溢出:隐藏以隐藏不活动的状态。它有时有效，但有时看起来像这样:

最奇怪的是，当我尝试使用 Chrome Web Inspector 时，它会自行修复!在 HTML/CSS 中看起来没有什么奇怪的。

我非常困惑为什么它不能一直损坏或正常工作。

这是 HTML:

<div class="hunting_card_button">
    <div class="hunting_card_icon" id="gift_to_friend">
        <img src="/images/icons/friend2.png?1" />
    </div>
    Friend
</div>

以及相关的 CSS:

.hunting_card_button {
    width: 65px;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    margin: 0 2px 0 2px;
}
.hunting_card_icon {
    position: relative;
    right: 0;
}
.hunting_card_icon:hover {
    right: 65px;
    cursor: pointer;
}

Answer 1

解决方案是将其中一个容器从 span 更改为 div。