iOS中元素的奇怪重叠(PhoneGap)

Question

我正在开发iOS/PhoneGap项目.我在iOS中有一个奇怪的重叠问题(来自iPad的截图):

"选择状态"弹出窗口是position: absolute, z-index: 35.网站链接没有指定位置(so static),也没有指定z-index.

无论地址链接是没有链接的随机文本,还是链接(捕获),它都会发生.

这就是它在Chrome中的样子(正如预期的那样)(在视网膜Mac上拍摄,所以它很大):

我试着在iPad上的Safari控制台整天调整z索引,但没有效果.它似乎不是一个"简单"的z-index问题.所以请不要只说"调整z-index".

[编辑]具体来说,我已经尝试设置z-indexpopover 5000和web地址-10(给它几个不同的positions),我检查了两个元素的每个祖先,以确保它们都没有z-indexes(他们没有"T).我甚至试过给一些popover positions和z-indexes 的祖先.没有任何改变.(又恐怕是长大了,我也尝试改变colorS和东西,只是为了确保我的变化都能够进入页面.)

谢谢.

Answer 1

所以这已经困扰了我们的项目大约一个月,但我想我解决了它.我还没有彻底检验过这个理论,但到目前为止它已经解决了我们所有的问题.

如果你还记得在IE7的时代,有一个奇怪的z-index错误,你可以修复它的唯一方法是找到作为兄弟姐妹的罪犯元素的祖先并调整他们的 z索引.

例如,假设这是我的标记:

<div class="container">
    <div class="header">
        <button>
            Click Me

            <div class="dropdown">
                <ul>
                    <li>This</li>
                    ...
                </ul>
            </div>
        </button>
    </div>

    <div class="content">
        <div class="col1">...</div>
        <div class="col2">...</div>
        <div class="col3">www.example.com</div>
    </div>
</div>

在我的图片中,它看起来在Chrome中是正确的,但在iOS中,www.example.com就在上面.dropdown.

他们的祖先是兄弟姐妹.header和.content.如果我调整z-index(当然设置position为relative,当然).header高于.content,它修复了问题.

希望这有意义,并帮助任何可能来到这个页面的东西......