为什么会出现滚动条？答案

【问题标题】：Why scroll bars appears?为什么会出现滚动条？
【发布时间】：2010-09-14 09:13:22
【问题描述】：

HTML：

<div>
    <img src='http://i51.tinypic.com/4kz4g5.jpg' />
</div>

CSS：

div {
    width: 260px;
    height: 195px;
    overflow: auto;
    background: #333;
}

图片的尺寸为width=260px, height=195px，与div的尺寸一模一样。

我的问题是为什么滚动条出现在这种情况下？（我希望它们仅在图像尺寸大于div 的尺寸时才会出现）

【问题讨论】：

【解决方案1】：

这是由于 img 是一个内联标签，所以它为文本的升序和降序留出了空间。将img设置为display: block就可以正常工作了。

【讨论】：

【解决方案2】：

这是因为在您的 <div> 中插入了一个空文本节点，并添加了足够的空间来需要滚动条。您可以使用以下 CSS 修复它：

div {
    width: 260px;
    height: 195px;
    overflow: auto;
    background: #333;
    font-size: 0;
    line-height: 0;
}

【讨论】：

【解决方案3】：

将display: block 添加到img。

【讨论】：

【解决方案4】：

默认情况下，Divs 具有填充值，您应该将它们设置为 0。

padding: 0px;

【讨论】：