Chrome上"溢出:自动"的奇怪行为

Question

我正在开发一个有博客部分的网站.我需要这个部分有一个固定的高度.为了能够看到博客中的所有帖子,我添加了一个溢出: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虽然在帖子列表大于容器时显示滚动条,但在容器下方的帖子列表中增加了一个白色间隙.

我创建了一个小提琴但我无法重现那里的Chrome行为:

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

使用溢出:滚动而不是自动给我相同的结果.

有任何想法吗？

提前致谢

Answer 1

我找到了解决问题的方法.出于某种原因,为了在Chrome中工作,我必须添加一个位置:相对规则到#content:

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