全部,
我正在开发一个包含非常“高”表单的网络应用程序。 (所谓高,是指它比典型屏幕高百分之几)。
该设计需要一个固定在屏幕底部的“页脚”,无论用户在表单中的位置如何,它始终可见。
换句话说,无论用户是靠近表单的顶部、中间还是底部,页脚都应该可见,并且表单应该滚动到它的“下方”。
为了实现这一点,我将页脚创建为具有 position:fixed
和 bottom: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/