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

Question

我正在开发一个 iOS/PhoneGap 项目。我在 iOS 中有一个奇怪的重叠问题（来自 iPad 的屏幕截图）：

“选择状态”弹出框是position: absolute, z-index: 35。网站链接没有指定位置（所以static）并且没有指定z-index。

无论地址链接是没有链接的随机文本，还是链接（如捕获的），它仍然会发生。

这是它在 Chrome 中的样子（如预期的那样）（在视网膜 Mac 上拍摄，所以它很大）：

我整天都在 iPad 上的 Safari 控制台中尝试调整 z-index，但没有任何效果。 这似乎不是一个“简单”的 z-index 问题。所以请不要只说“调整 z-index”。

[edit] 具体来说，我尝试将弹出框的z-index 设置为5000，将网址设置为-10（给它几个不同的positions） ，并且我检查了这两个元素的每个祖先，以确保它们都没有z-indexes（他们没有）。我什至尝试给几个popover的祖先positions和z-indexes。什么都没有改变。 （为了避免被提出来，我确实尝试更改 colors 之类的东西，只是为了确保我的更改进入页面。）

谢谢。

Answer 1

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

如果您还记得在 IE7 的日子里，有一个奇怪的 z-index 错误，您可以修复它的唯一方法是找到作为兄弟元素的违规元素的祖先并调整他们的 em> z-indexes。

例如，假设这是我的标记：

<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。如果我将.header 的z-index（当然，将position 设置为relative）调整为高于.content，它就解决了这个问题。

希望这是有道理的，并对可能出现在此页面的任何内容有所帮助...