全部。我在尝试在 overflow: scroll 容器中实现 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
的各种组合,但无济于事。
这是一个错误还是我做错了?
最佳答案
CSS 属性 overflow: scroll
每次在 iPhone 上有 scroll
浏览器为滚动添加了边距,因为它是针对触摸优化的浏览器。
关于iPhone + CSS3 多列 + 溢出 : Scroll = Bug?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8776037/