溢出 :hidden 导致的 CSS 异常

Question

至少我认为它来自隐藏的溢出。

我有一堆 div 作为内联 block 。它们每个都有一个大于 50x50 集的图像，带有溢出隐藏集。有时在加载时，图像不太正确:

但如果我右键单击以检查元素，它会立即解决(Chrome)。 Safari 有类似的行为。

预期结果:

HTML:

<div id="thumb_overlay">        
            <div class="active">
                <img src="1.jpg" data-src="a.jpg">
            </div>

            <div>
                <img src="2.jpg" data-src="b.jpg">
            </div>

            <div>
                <img src="3.jpg" data-src="c.jpg">
            </div>


            ... etc
</div>

CSS:

#thumb_overlay {
position: absolute;
bottom: 5px;
right: 5px;
text-align: right;
background-color: rgba( 255, 255, 255, .5);
padding: 5px 5px 0 5px;
}

#thumb_overlay > div {
display: inline-block;
width: 50px;
height: 50px;
overflow: hidden;
}

#thumb_overlay img {
opacity: .9;
cursor: pointer;
}

Answer 1

尝试将其显示为:阻止它们并将它们彼此相邻 float 而不是内联它们，我在绝对定位方面遇到了类似的问题，让浏览器自动定位它们似乎可以解决鼠标悬停问题。