iPhone + CSS3 Multi Col +溢出：Scroll = Bug？

Question

所有。在尝试在溢出内部实现CSS3多列时，我遇到了奇怪的行为：滚动容器。适用于OS X的Chrome + Safari，在iPhone上打破：

<div id="rubber-banded">
  <div id="columns">
    <p>[...]</p>
    <p>[...]</p>
    [...]
  </div>
</div>

#rubber-banded {
  -webkit-overflow-scrolling: touch;
  overflow:scroll;
  margin-top:42px;
  width:100%;
  outline:2px solid red;
  height:300px;
}

#columns {
  margin-top:10px;
  -webkit-column-width:120px;
  height:250px;
  outline:2px solid blue;
}

以下是预期结果：

以下是实际结果：

如您所见，文本溢出#columns，直到新段落开始。然后，下一段开始于下一列，上面有一个间隙。这很奇怪，如果我在overflow:scroll;上将overflow:hidden;更改为#rubber-banded，我会得到预期的结果 - 但是，我没有得到我想要的橡皮筋效果:(我也尝试了-webkit-column-break-after的各种组合，但没有用。

这是一个错误还是我做错了？

Answer 1

浏览器对CSS属性overflow: scroll的解释不同（尽管浏览器引擎在您的情况下是相同的），每当有scroll浏览器为iPhone添加余量时，在iPhone上滚动，因为它是触控优化的浏览器。