Chrome浏览器中"overflow: auto"的奇怪行为

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可以得到相同的结果。

有什么想法吗？

提前致谢。

- leemon

---

如果你无法在jsFiddle上重现它，那么你可能有更多的代码导致了这个问题。此外，发布一个无法重现问题的fiddle有什么意义呢？ - j08691

Answer 1

我找到了解决我的问题的方法。由于某种原因，在Chrome中使其正常工作，我不得不将#content添加一个position:relative的规则：

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

- leemon

---

哇，谢谢！我的问题是（水平）滚动条似乎位于下一个元素下面，因此无法抓取。在容器上使用position: relative解决了这个问题。 - Phil

同上，一样的事情，滚动条可见但只能在一个特定点抓住。在<pre>中使用代码块时遇到了问题。 - Ron

遇到了这样的问题 - 只在Chrome上，而且只在视网膜显示器上！我实际上可以将我的窗口拖到连接的1x监视器上，并观看页面正确地重新绘制，但在视网膜侧面，它会间歇性地无法绘制大部分滚动部分。似乎是一个纯粹的错误，而不是标准解释问题。无论如何，您的解决方案是救命稻草。 - johncip

我认为你的答案之所以有效，并不是因为 position:relative，而是因为 overflow:visible，这使得它永远不会显示滚动条。 - bostero2

Answer 2

来自HTML5应用程序开发基础的可能答案

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

现在这更偏向于响应式设计。在overflow前添加-webkit-可能会有帮助，因为这只是Chrome的问题。假设它是CSS3。

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

- reinhoc