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

前端之家收集整理的这篇文章主要介绍了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 */

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

猜你在找的CSS相关文章