android - Android 浏览器上的 CSS 溢出和绝对定位问题

标签 android css cordova

我们有一个使用 JQuery Mobile、PhoneGap 和 ASP.net MVC 构建的移动网络应用程序。 该应用程序的目标是在 iOS 和 Android 设备上运行,无论使用何种浏览器。 我们已经在下面列出的设备上测试了该应用程序,它似乎可以正常工作,没有任何问题

iOS 5 - iPad、iPhone。

Android 4.1.2 - Google Nexus 7、三星 Galaxy S3、三星 Galaxy Note 2、三星 Galaxy Tab 2。

Android 4.0.3 - Asus Transformer 选项卡

但是在 Samsung Galaxy Note 800Android Stock 浏览器 4.1.2 上测试时,我们遇到了一个非常奇怪的问题。启用滚动时,放置在具有 css 属性“overflow:auto”的 div(例如子 div)中的元素不会响应任何触摸事件。这里要注意的主要是包含此 div 的 Parent div 绝对定位为 'position:abolute'。在网上研究了一段时间后,我们发现绝对位置和溢出属性的组合可能会导致Android浏览器出现一些问题。

目前无法移除绝对位置,因为这会导致完全重新设计布局,并且我们只剩下几天的发布时间了。那么任何人都可以建议快速解决这个问题吗?

最佳答案

改用 overflow-x 和/或 overflow-y 属性。

EG

overflow-y: scroll; /* allow vertical scrolling */
-webkit-overflow-scrolling: touch; /* optional momentum scrolling */

此外,由于滚动条在触控设备上是隐藏的,因此您可以使用 :scroll 而不是 :auto。它看起来一样,但可能不会出现相同的错误。

关于android - Android 浏览器上的 CSS 溢出和绝对定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17938755/

相关文章:

java - 从网页中获取文本作为字符串

java - 如何按降序检索 firebase 数据

java - 在 Android ListView 中显示空行

android - intel xdk 在后退按钮点击时退出移动应用程序

javascript - 将字符串转换为图像并将其发送到 WhatsApp

jquery - 如何在 PhoneGap 应用程序中使用 ONSEN-UI 实现 iOS 类型的 ON SWIPE DELETE 功能?

android - 在 android 中加入表格

html - 在 flex 行中使用 `nowrap` 时,避免将最后一个元素推出屏幕

html - CSS 是否可以嵌套(就像 SASS 一样)?

javascript - 如何在 Rails 应用程序上有效地限定 javascript set css 的范围?