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

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

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

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;
}
0
何枚の画像が入っているのか分かりません。私が推測するjsでそうすることができます。
追加された 著者 hookedonwinter,
今はロックされたサイトなので、表示できません。私はそれらを浮かせるつもりです、それは十分にうまくいきます。
追加された 著者 hookedonwinter,
あなたはどこでもこのオンラインを持っていますか?
追加された 著者 Nightfirecat,
あなたのコードは私にとっては完璧に見えます。これはブラウザのバグのように聞こえますが、あなたが提供したHTML/CSSだけでは再現できません。あなたはページの完全なhtml/cssを提供できますか?何か他のことが起こっているに違いない、たぶんjavascriptや他のCSSルール。
追加された 著者 Abhi Beckert,
多分、thub_overlayに幅を追加するだけでしょうか?
追加された 著者 Niels,

1 答え

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

0
追加された
いいですよ。やってみます。私は、個々の部門にいくらかのマージンを移し、何かをしなければならないでしょう:まず、そして、私が避けることを望んでいた最後の手腕。しかし、これまでのところ、唯一の選択肢。
追加された 著者 hookedonwinter,
Floatは解決するよりも多くの問題を引き起こします。たとえば、ブラウザは #thumb_overlay の幅と高さを判断できません。インラインブロックが正しい表示タイプです。
追加された 著者 Abhi Beckert,