Question

我的页面上有这个：

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

#result div未在CSS中定义（我已选中）。

div拒绝以100 x 100尺寸显示，而是切断部分高度。并不仅仅是它没有被一直显示，因为我可以看到较低的圆角 - 它实际上具有比定义的更小的高度。为什么会这样？

里面的图像尺寸也是100 x 100，但这并不重要，无论我把它放在里面都会发生同样的事情。

编辑：定义内联高度也无济于事。

Answer 1

您是否在Firebug中查看过div以查看div是否继承了其他任何样式？也许添加' display：block '可能会修复它，听起来如果你的高度属性被忽略它可能会显示为内联元素...或者可能有一个max-height：set somewhere，在这种情况下，“ max-height：100％”可以正常工作。

Answer 2

尝试使用!important覆盖可能导致高度不是100px的其他代码

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

这不是一个很好的解决方案，但它可以帮助您调试问题。否则，请使用Chrome的检查员（或萤火虫）找出覆盖您的身高定义的内容

Answer 3

试试这个

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

即使定义了宽度和高度，DIV也会被切断

3 个答案: