0

私のページにはこれがあります：

<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;
}

div は CSSの#resultどこにも定義されていません (確認しました)。

div は 100 x 100 サイズでは表示されず、代わりに高さの一部が切り取られます。端まで表示されていないというわけではありません。丸みを帯びた角が下にあることがわかります。実際には、定義されているよりも高さが低くなっています。なぜこうなった？

中の画像も 100 x 100 のサイズですが、それは問題ではありません。何を入れても同じことが起こります。

編集:高さをインラインで定義しても役に立ちません。

4

3 に答える 3

1

!important高さが100pxにならない原因となっている可能性のある他のコードをオーバーライドするために使用してみてください

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

これは優れたソリューションではありませんが、問題のデバッグに役立つ可能性があります。それ以外の場合は、Chromeのインスペクター（またはFirebug）を使用して、高さの定義をオーバーライドしているものを見つけます

于 2012-04-13T22:30:54.410 に答える
1

Firebug でチェックアウトして、div が他のスタイルを継承しているかどうかを確認しましたか? おそらく、「display:block」を追加すると修正される可能性があります。高さプロパティが無視されている場合、インライン要素として表示される可能性があるように聞こえます...または、どこかに max-height: が設定されている可能性があります。その場合、「max-height 」 :100% ' 動作する可能性があります。

于 2012-04-13T15:20:28.640 に答える
0

try this instead 

      <div style="clear:both;"></div>
      <div id="result" class="thumbholder"><img src="img/thumbs/thumb01.png" alt="thumb" /></div>
于 2012-04-13T16:39:21.567 に答える