iPhone + CSS3 多列 + 溢出：滚动 = 错误？

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，直到新段落开始。然后，下一段从下一列开始，上面有一个空白。这很奇怪，如果我在#rubber-banded 上将overflow:scroll; 更改为overflow:hidden;，我会得到预期的结果——尽管我没有得到我想要的橡皮筋效果:(。我也试过了-webkit-column-break-after 的各种组合都无济于事。

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

Answer 1

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