html - iOS5 (Safari) 的一个错误,一个 "position:fixed' div 和高大的表格

标签 html css ios5 css-position

全部,

我正在开发一个包含非常“高”表单的网络应用程序。 (所谓高,是指它比典型屏幕高百分之几)。

该设计需要一个固定在屏幕底部的“页脚”,无论用户在表单中的位置如何,它始终可见。

换句话说,无论用户是靠近表单的顶部、中间还是底部,页脚都应该可见,并且表单应该滚动到它的“下方”。

为了实现这一点,我将页脚创建为具有 position:fixedbottom:0 的 div。

这在我测试过的所有浏览器上都能完美运行,包括 iOS5 上的 Safari。

除了有一个错误...

如果用户靠近表单顶部,并将焦点放在其中一个文本字段上 - 正如预期的那样,iOS 会显示键盘。

每次用户点击下一步按钮时,iOS 都会将她“切换”到下一个字段。

当她通过反复点击下一步 向下浏览表单时,iOS 会自动“向上滚动”表单,因此她在表单上的位置仍然可见。

但是,iOS 似乎没有更新 position:fixed 页脚 div 的位置 - 它错误地与表单的其余部分一起向上滚动。

如果用户关闭键盘,div 将恢复到它的“正确”位置,因此这不是不可恢复的错误。但是,页脚完全移动的事实是一个明显的问题。

这是 iOS 实现 position:fixed 的错误或缺陷吗?或者,我做错了什么吗?

非常感谢!

[更新]

Remy Sharp(恰本地命名)刚刚写了一篇关于 iOS/Safari 上 position:fixed 的各种错误和问题的优秀而详细的帖子:http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/ .如果您正在考虑在面向 iOS 用户的网站上使用 position:fixed,那么这是一本必读的书...

最佳答案

我知道 position:fixed 最初在 iOS 的早期版本中不受支持,我知道 iOS5 确实支持它,但我过去曾遇到过它的问题。如果您的页脚是某种控制栏,那么我建议使用 CSS 粘性页脚,然后所有页面/内容都可以加载到上面的 div 中。

关于html - iOS5 (Safari) 的一个错误,一个 "position:fixed' div 和高大的表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10728647/

相关文章:

css - 光滑,箭头仅以图片高度为中心,而不是图片宽度

java - GWT 中条件属性的 GSS CSS 表达式?

ios - UICollectionView 在横向模式下不正确的边缘插入

ios - 我的 iOS 应用程序需要推文

html - 相对于父而不是浏览器的固定位置

html - 如何在悬停时将文本放在图像上 - 宽度和高度是可变的

javascript - 有没有不会弄乱代码的所见即所得的 HTML 编辑器?

css - 在 IE7 中滚动后 Div 边框不会重新绘制

javascript - 如何在 sass 文件中导入全局规则而不将其编译掉?

iPhone - 为 armv7 构建的 OpenCV 库