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

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

iOS 5 – iPad,iPhone。

Android 4.1.2 – Google Nexus 7,Samsung Galaxy S3,Samsung Galaxy Note 2,Samsung Galaxy Tab 2。

Android 4.0.3 – 华硕变压器标签

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

目前无法删除绝对位置,因为它会导致布局的完全重新设计,我们只剩下几天才能发布。那么任何一个建议可以快速解决这个问题吗?

解决方法

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

例如

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

此外,由于滚动条隐藏在触摸设备上,您可以使用:滚动而不是:自动。它看起来一样,但可能不会受到相同的错误

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...