有一种解决方法用于CSS位,可点击区域的Andr​​oid浏览器漏洞? [英] Is there a workaround for the Android browser bug with CSS-Position and clickable areas?

查看:150
本文介绍了有一种解决方法用于CSS位,可点击区域的Andr​​oid浏览器漏洞?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当你有一些可点击的内容,比如< A> <输入> <区域> 而在此之前,你有一个更大的z-index绝对定位的元素,有点击率错误的行为
。 我点击区域可点击元素是前面元件的后面。在其他浏览器有正确的行为,该点击不经过前面的元素。但只有在Android浏览器,你可以通过前元素点击激活后面的元素。这是一个已知的bug,你不能避免它。它甚至在新版本(我在官方Android模拟器上测试2.3.3)。

When you have some clickable content like <a>, <input> or <area> and before this you have an absolutely positioned element with a bigger z-index, there is the wrong behavior of 'click-through'.
I click on the area where the clickable element is behind the front element. In other browsers there is the right behavior that the click does not go through the front element. But only in Android Browser you can click through the front element and activate the element behind. This is a known bug and you cannot avoid it. It's even in newer versions (I test on 2.3.3 in the official Android emulator).

有在一些论坛中描述的一些解决方法,但他们没有为我工作。

There are some workarounds described in some forums but none of them worked for me.

  • 我试图把一个&LT; IFRAME&GT; &LT; A&GT; 正面和背面的
  • 我试图改变DOM,所以也许在浏览器状态刷新
  • 我试图让后面的元素被定位以及 无工作
  • I tried to put an <iframe> or an <a> between front and back
  • I tried to change the DOM so maybe the browsers state is refreshed
  • I tried to have the back elements be positioned as well None worked

我特别有问题的图像映射的区域元素。

I'm especially having problems with the image map's area elements.

有没有人有同样的问题,并设法解决它? 我在这是对图像映射测试的解决方案特别感兴趣。

Has anyone had the same issue and managed to work around it? I'm specifically interested in solutions which are tested against image maps.

推荐答案

这是一个快速蒙着眼睛的答复,所以让我知道我是否应该扩大/进一步修复它。总的想法是一个CSS类为悬停和重点禁用指针的互动活动。

This is a quick blindfolded reply, so let me know if I should expand/fix it further. The general idea being a CSS class for both the hover and focus events that disables pointer interaction.

yourElementClass:focus, yourElementClass:hover {
    pointer-events: none;
}

这篇关于有一种解决方法用于CSS位,可点击区域的Andr​​oid浏览器漏洞?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆