位置:固定元素在另一个位置:固定元素不显示(仅限iPad)

时间:2013-12-06 16:22:37

标签: css ipad mobile-safari css-position

这是一个JSFiddle: http://jsfiddle.net/hw5Zu/

简而言之,我有一个位置:固定元素.fixedblock with overflow-y:auto,以便溢出的内容导致垂直滚动条。

里面我有另一个位置:固定元素.insideblock,位于外面 .fixedblock的周长。 (它应该是滚动窗格上方的标题栏。)

在我测试的所有浏览器中(最新的Chrome,Firefox,IE7-10),.fixedblock可见。它仅在Mobile Safari(iPad)上不可见(裁剪)。 (虽然iPad上的JSFiddle没有显示问题。)

哪些浏览器正在做正确的事情?有人可以建议修复吗?

1 个答案:

答案 0 :(得分:0)

我解决了这一问题,方法是为.fixedblock提供一个等于.insideblock高度的上边距,并将.insideblock放在顶部:0,在边缘上方。我无法使用填充,因为.fixedblock的滚动条会在.insideblock下面消失。通过使用边距,滚动条从边距下方开始。

在iPad上仍存在同样的问题,.insideblock被视为超出.fixedblock的范围,并且消失了。所以我求助于用户代理检测 - 仅限iPad - 我将顶部边距更改为顶部填充。这在iPad上没问题,因为它没有滚动条。