Chrome上“溢出：自动”的奇怪行为答案

【问题标题】：Strange behavior of "overflow: auto" on ChromeChrome上“溢出：自动”的奇怪行为
【发布时间】：2014-05-18 20:45:16
【问题描述】：

我正在开发一个带有博客部分的网站。我需要这个部分有一个固定的高度。为了能够查看博客中的所有帖子，我添加了 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 虽然在帖子列表大于容器时会显示滚动条，但会在容器下的帖子列表大小上添加一个空白。

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

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

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

有什么想法吗？

提前致谢

【问题讨论】：

如果您无法在 jsFiddle 中重现它，那么您可能有更多导致问题的代码。另外，设置一个不会重现问题的小提琴有什么意义？

标签： html css google-chrome overflow

【解决方案1】：

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

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

【讨论】：

天哪，谢谢！我的问题是（水平）滚动条似乎位于下一个元素下方，因此不可抓取。容器上的position: relative 解决了这个问题。
同上，同样的事情，滚动条可见但只能在一个特定点抓取。
```
.
```
中的代码块有问题
遇到了这样的问题——仅在 Chrome 上，并且仅在视网膜显示器上！我实际上可以将我的窗口拖到一个附加的 1x 监视器上，并正确地观看页面重新绘制，但是在视网膜端，它会间歇性地无法绘制大部分滚动部分。似乎是一个直接的错误，而不是标准解释问题。无论如何，您的解决方案是救命稻草。
我想说你的答案不是因为 position:relative 而是因为 overflow:visible 这使它永远不会显示滚动条。

【解决方案2】：

HTML5 应用程序开发基础的一个可能答案

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

现在这更倾向于响应式设计。在溢出之前添加 -webkit- 可能会有所帮助，因为它只是 chrome 问题。假设它是 CSS3。

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

【讨论】：