Question

讨厌的小虫子，这个。

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

提前致谢！

Answer 1

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

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

Answer 2

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

我无法测试它，但这些可能是解决方法：

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

如果这不满足你...

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

2 制作<a> - 代码容器：

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

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

如果1和2没有帮助尝试两者一次;）

3 如果仍然发生您可能想要详细了解点击时会发生什么。将点击和mousedown事件绑定到：link on top，container on top，input in the bottom并记录下来。如果您获得顶部链接的任何事件您可以尝试在某个时刻停止冒泡或阻止底部输入的事件。

这很难，但我可以帮助一下。 jQuery非常必要。

Answer 3

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

将iframe放在绝对内容后面。 iframe可能会为您隐藏这些元素
当您显示绝对内容时，请使用JavaScript隐藏所有问题元素
以相反的顺序定义div

点号1被认为是IE最可靠的解决方案，但可能不是最好的解决方案。

Answer 4

将其添加到创建问题的每个元素的CSS中：

 -webkit-backface-visibility: hidden;

Answer 5

使用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>

Answer 6

IE有同样的问题，解决方法是确保定位中涉及的每个元素甚至其容器都应用了z-index。基本上，如果你在dom中向1个元素添加一个z-index，那么IE就会理解它的z位置，但是不了解它的z位置相对于它的下一个和/或哪个。

container - 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

Answer 7

将html放在div中并使用javascript设置display：none，这样底层内容就会消失，而不是可点击和模态。

Answer 8

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

Android Webkit：绝对定位的元素不尊重z-index

8 个答案: