iPhone + CSS3 Multi Col + Overflow：Scroll = Bug？

全部。在尝试在overflow：scroll容器内实现CSS3多列时，我遇到了奇怪的行为。在Chrome + Safari浏览器为OS X的作品，打破了iPhone上：iPhone + CSS3 Multi Col + Overflow：Scroll = Bug？

<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; 
}

这里是预期的结果： expected result

，这里是实际结果： enter image description here

正如你所看到的，文本溢出#columns，直到新的段落开始。然后，下一段从上面的间隔开始。这很奇怪，如果我在#rubber-banded上更改overflow:scroll;到overflow:hidden;，我会得到预期的结果 - 尽管我没有得到我要用的橡皮筋效果:(我也尝试过-webkit-column-break-after的各种组合无济于事。

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

来源

2012-01-08 moon prism power

财产overflow: scroll是由浏览器不同的解释（尽管浏览器引擎是在你的情况一样）的CSS，在iPhone每当时间有是一个scroll浏览器为卷轴添加了余量，因为它是触控优化的浏览器。

来源

2012-03-27 08:35:31 bodi0

无论'#rubbe的大小r-banded“，它的滚动边距（出现在iPhone和桌面webkit上）或其溢出属性**，每个文本列总是与Chrome + Safari **上的＃列顶部对齐。我们可以通过将'＃rubber-banded'的高度折叠为小于＃＃列来证实这一点。 Chrome + Safari添加垂直滚动条，但列正常渲染。 iPhone没有。桌面上的行为是，无论'＃columns'周围发生了什么，文本列不应该溢出它们的容器，并且它们总是应该排在最前面。 – 2012-03-31 14:53:22

iPhone + CSS3 Multi Col + Overflow：Scroll = Bug？

回答

相关问题