オーバーフローからのCSS不思議:隠された

少なくとも私はそれがオーバーフローから隠されていると思う。

私はインラインブロックとしてdivの束を持っています。それぞれ50×50以上の大きさの画像があり、オーバーフロー隠しセットがあります。ときどき読み込まれると、イメージが正しく整理されません。

https://img.skitch.com/20111112-8nr1nur9ts5hd8cy7uumh3ft21.jpg

しかし、要素を点検するために右クリックすると、すぐに(Chrome)落ち着きます。 Safariも同様の動作をします。

期待される結果:

enter image description here

HTML:

<div id="thumb_overlay">        
            <div class="active">
                
            </div>

            <div>
                
            </div>

            <div>
                
            </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;
}
ベストアンサー

表示として試してみてください:ブロックし、それらをインライン展開するのではなく、互いに隣り合わせに浮かべてください。私は絶対的な配置に関して同様の問題を抱えており、ブラウザの位置をマウスオーバーの問題を自動的に止めてしまったように見せます。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です