html - "overflow: auto"在 Chrome 上的奇怪行为

Question

我正在开发一个带有博客部分的网站。我需要这个部分有一个固定的高度。为了能够看到博客中的所有帖子，我添加了一个overflow: auto，以便在需要时显示滚动条。

<div id="container">
<div id="content">
    <div class="post">
         This is a long post....
    </div>
    <div class="post">
        This is a long post....
    </div>
    <div class="post">
        This is a long post....
    </div>
    ....
    ....
    ....
    ....
</div>
</div>

#container {
    overflow: hidden;
}

#content {
    height: 200px;
    overflow: auto;
    border: 1px solid red;
}

.post {
    margin: 20px 0;
}

我在 Chrome、Firefox 和 IE 上对此进行了测试。 Firefox 和 IE 上的站点按预期工作，但 Chrome 虽然在帖子列表大于容器时显示滚动条，但会在容器下添加一个与帖子列表大小相同的白色间隙。

我创建了一个 fiddle ，但我无法在那里重现 Chrome 的行为:

http://jsfiddle.net/u5d56/3/

使用 overflow: scroll 而不是 auto 得到相同的结果。

有什么想法吗？

提前致谢

Answer 1

我找到了解决问题的方法。出于某种原因，为了在 Chrome 中工作，我必须向 #content 添加一个 position:relative 规则:

#content{
    position: relative;
    height: 200px;
    overflow:visible;
    border 1px solid red;
}