غموض CSS من فيض: مخفي

على الأقل أعتقد أنه من تجاوز مخفي.

لقد حصلت على حفنة من divs كتل المضمنة. لديهم كل صورة أكبر من مجموعة 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>

المغلق:

#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
لا أعرف عدد الصور التي ستكون موجودة فيها. يمكن أن تفعل ذلك في شبيبة أظن.
وأضاف المؤلف hookedonwinter, مصدر
إنه موقع مغلق حاليًا ، لذا لا يمكنني عرضه. سأقوم فقط بتعويمها ، إنها تعمل بشكل جيد بما فيه الكفاية.
وأضاف المؤلف hookedonwinter, مصدر
هل لديك هذا على الإنترنت في أي مكان؟
وأضاف المؤلف Nightfirecat, مصدر
يبدو رمزك جيدًا جدًا بالنسبة لي. يبدو هذا وكأنه خطأ في المتصفح ، وأحد لا أستطيع إعادة إنتاجه باستخدام شفرة HTML/CSS التي قدمتها. هل يمكنك تقديم html/css كاملًا للصفحة؟ يجب أن يكون هناك شيء آخر يحدث ، ربما بعض JavaScript أو غيرها من حكم المغلق.
وأضاف المؤلف Abhi Beckert, مصدر
ربما فقط إضافة عرض إلى thub_overlay؟
وأضاف المؤلف Niels, مصدر

1 إجابة

جربها كعرض: قم بلفها وتطفوها بجانب بعضها البعض بدلاً من تحريكها ، واجهت مشاكل مماثلة مع الوضعية المطلقة والسماح للمستعرض بوضعها تلقائيًا يبدو أنه يوقف مشكلة تمرير الماوس.

0
وأضاف
دعوة جيدة. سأجربه سأضطر إلى نقل بعض الهامش إلى divs الفردية ، والقيام ببعض: أولاً و: fqueiness الماضي ، الذي كنت أتوقع تجنبه. ولكن ، حتى الآن ، الخيار الوحيد.
وأضاف المؤلف hookedonwinter, مصدر
سيسبب Float المزيد من المشكلات أكثر مما يحلها ، على سبيل المثال لن يتمكن المتصفح من تحديد عرض/ارتفاع #thumb_overlay . المضمن - block هو نوع العرض الصحيح.
وأضاف المؤلف Abhi Beckert, مصدر