DIV wird sogar abgeschnitten wenn Breite und Höhe

Question

definiert ich das auf meiner Seite haben:

<div id="result" class="thumbholder"><img src="img/thumbs/thumb01.png" alt="thumb" /></div> 

CSS:

.thumbholder{ 
width:100px; 
height:100px; 
text-align:center; 
overflow:hidden; 
border-radius:6px; 
float:left; 
margin:0; 
} 

Die #result div definiert ist nicht überall in CSS (I geprüft) .

Das div weigert sich, in 100 x 100 Größe zu zeigen, stattdessen schneidet es einen Teil der Höhe ab. Es ist nicht so, dass es nicht ganz angezeigt wird, da ich die unteren abgerundeten Ecken sehen kann - es hat tatsächlich eine geringere Höhe als definiert. Warum passiert dies?

Das Bild im Inneren ist auch 100 x 100 groß, aber das ist egal, das gleiche passiert, was auch immer ich drinnen hineinlege.

EDIT: Definition der Höhe inline hilft auch nicht.

Answer 1

Versuchen !important mit anderem Code zu überschreiben, die die Höhe verursachen könnten nicht 100px

.thumbholder 
{ 
    width:100px !important; 
    height:100px !important; 
    text-align:center; 
    overflow:hidden; 
    border-radius:6px; 
    float:left; 
    margin:0; 
} 

sein Es ist nicht eine große Lösung, aber es könnte Ihnen helfen, das Problem zu beheben. Andernfalls verwenden Sie den Inspector von Chrome (oder Firebug), um herauszufinden, was Ihre Höhendefinition überschreibt.

Answer 2

Haben Sie es in Firebug überprüft, um zu sehen, ob das div andere Stile erbt? Vielleicht fügt "display: block" es möglicherweise zu beheben, klingt wie es könnte angezeigt werden als ein Inline-Element, wenn Ihre Höhe Eigenschaft ignoriert wird ... Oder möglicherweise gibt es eine maximale Höhe: irgendwo eingestellt, in diesem Fall 'Max-Höhe: 100% könnte funktionieren.

Answer 3

dies versuchen stattdessen

 <div style="clear:both;"></div> 
     <div id="result" class="thumbholder"><img src="img/thumbs/thumb01.png" alt="thumb" /></div>