CSS weirdness from overflow: hidden

Tenminste ik denk dat het van overflow is verborgen.

Ik heb een aantal div's als inline-blokken. Ze hebben elk een afbeelding die groter is dan de ingestelde 50x50, met verborgen overloopset. Soms bij het laden, zetten de beelden niet helemaal goed:

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

Maar als ik met de rechtermuisknop klik om het element te inspecteren, wordt het meteen verrekend (Chrome). Safari heeft een vergelijkbaar gedrag.

Verwacht resultaat:

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
Ik weet niet hoeveel afbeeldingen erin zullen zitten. Zou dat in JS kunnen, denk ik.
toegevoegd de auteur hookedonwinter, de bron
Het is nu een afgesloten site, dus ik kan het niet laten zien. Ik laat ze gewoon drijven, het werkt goed genoeg.
toegevoegd de auteur hookedonwinter, de bron
Heb je dit overal online?
toegevoegd de auteur Nightfirecat, de bron
Je code ziet er perfect uit voor mij. Dit klinkt als een bug in de browser, en een die ik niet kan reproduceren met alleen de HTML/CSS die je hebt opgegeven. Kunt u de volledige html/css van de pagina opgeven? Er moet iets anders aan de hand zijn, misschien een JavaScript of een andere CSS-regel.
toegevoegd de auteur Abhi Beckert, de bron
Misschien voeg je gewoon een breedte toe aan de thub_overlay?
toegevoegd de auteur Niels, de bron

1 antwoord

Probeer het als weergave: blokkeer ze en zweef ze naast elkaar in plaats van ze in lijn te brengen, ik had vergelijkbare problemen met absolute positionering en de browser positie automatisch laten lijken leek het mouseover-probleem te stoppen.

0
toegevoegd
Goed gesprek. Ik zal het uitproberen. Ik zal wat marge moeten verplaatsen naar de individuele divs, en een aantal doen: eerst en: laatste fantasieën, die ik hoopte te vermijden. Maar tot nu toe enige optie.
toegevoegd de auteur hookedonwinter, de bron
Float zal meer problemen veroorzaken dan het oplost, de browser kan bijvoorbeeld de breedte/hoogte van #thumb_overlay niet bepalen. Inline-blok is het juiste weergavetype.
toegevoegd de auteur Abhi Beckert, de bron