23

讨厌的小虫子，这个。

如Android 票证 6721所示，当绝对定位的元素放在<a>or<input>标记的顶部时，Android 浏览器似乎不尊重 z-index。我迫切需要任何解决方法。以前有人征服过这个吗？

提前致谢！

4

8 回答 8

11

此问题可能与控件及其对浏览器的特殊性有关。在查看您的问题（在铬中）时，我发现了一个相关问题，即当您按下 Tab 键时，您仍然可以聚焦输入元素。你可能也不想要这个（不管渗透如何）。解决方案非常简单，您编写脚本以将disabled属性添加到所有输入/按钮/等。被覆盖的元素。禁用的输入将无法获得焦点（通过键盘或其他方式），并且单击它应该是不可能的。

由于这也禁用了愚蠢的键盘环绕导航，因此它甚至不是一种解决方法，而是一种更好的设计，它也可以与预期的基于键盘的导航一起使用。

于 2010-04-08T09:44:51.293 回答
3

要正确回答问题，阅读错误页面很重要。问题不在于下面输入的可见性，而在于它的“可点击性”。

我无法对其进行测试，但这些是可能的解决方法：

0忘记绝对定位，只需将两个 div 放在那里并切换可见性。

如果这不能满足你...

1a尝试将所有和标签的 CSS 位置设置为绝对或相对（是的input，这可能会迫使您重写 CSS 以保持布局，但这不值得吗？）

2制作一个<a>-tag 容器：

 <div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
     stuff here
 </a></div>

这将需要更多的 CSS 来使内容看起来不错。但我希望这样的事情可以解决问题。

如果 1 和 2 没有帮助同时尝试它们；）

3如果它仍然发生您可能需要详细检查单击时会发生什么。将 click 和 mousedown 事件绑定到: link on top, container on top,input in the bottom并记录它们。如果您收到顶部链接的任何这些事件，您可以尝试在某个时刻停止冒泡或阻止底部输入的事件。

这会很困难，但我可以提供一点帮助。jQuery 将是非常必要的。

于 2010-04-09T18:11:48.363 回答
2

过去针对 IE 的此问题的修复包括但可能不限于以下列表。这些可能有助于为您解决 Android 中的问题。

  1. 在绝对内容后面放置一个 iframe。iframe 可能会为您掩盖这些元素

  2. 显示绝对内容时，使用 JavaScript 隐藏所有有问题的元素

  3. 以相反的顺序定义 div

第 1 点被认为是对 IE 最可靠的修复，但对您来说可能不是最好的修复。

于 2010-04-07T08:39:16.080 回答
2

将此添加到每个产生问题的元素的 CSS 中：

 -webkit-backface-visibility: hidden;
于 2014-08-12T21:49:29.493 回答
1

使用 DIV 模拟 INPUT 和 A。

[PSEUDO JQUERY CODE]

<div href="http://google.com" rel="a">Link</div>

<div class="field">
    <div></div>
    <input type="text" style="display: none" />
</div>

<script>
    $('div[rel=a]).click(function() {
        location.href = $(this).attr('href');
    });
    $('.field > div').click(function() {
        $(this).hide();
        $('.field > input').show();
    });
    $('.field > input').blur(function() {
        $(this).hide();
        $('.field > div').html($(this).val()).show();
    });
</script>
于 2010-04-06T20:46:25.173 回答
0

IE 也有同样的问题，解决方案是确保定位中涉及的每个元素甚至它们的容器都应用了 z-index。基本上，如果您将 z-index 添加到 dom 中的 1 个元素，则 IE 会了解其 z 位置，但不了解其相对于其旁边和/或上方的 z 位置。

容器 - z-index 0
孩子（在顶部容器上） - z-index 1
孩子 2（最重要的是） - z-index 999

当然，这都是基于愚蠢的 IE，但在 android 中也值得一试。

第二次尝试:)

我根本不熟悉 android 浏览器，但我希望能引导您找到解决问题的方法。Superfish 是一个 javascript 菜单，当 z-index 菜单项下拉到浏览器中的选择框时，它实现了一种解决方案。BgIframe 是他们用来实现这一点的 js。希望你的答案可能就在那里。

http://users.tpg.com.au/j_birch/plugins/superfish/#sample2

于 2010-04-02T08:22:13.947 回答
0

将下面的 html 放在一个 div 中并使用 javascript 设置 display:none，这样下面的内容就消失了，而不是可点击和模态的。

于 2012-01-08T22:38:01.593 回答
0

如果你想解决这个问题，首先你必须将 z-index 添加到父包装器并清楚地将 z-index 添加到您的其他元素，解决方案是所有元素都将具有正确理解 z-index 属性的零点

于 2014-05-16T13:58:06.147 回答