3

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

来自 iOS 的屏幕截图

“选择状态”弹出框是position: absolute, z-index: 35. 网站链接没有指定位置 (so static)，也没有指定 z-index。

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

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

图片正确的是Chrome

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

[编辑]具体来说，我尝试将弹出z-index窗口的't）。我什至尝试给几个 popover s 和es 的祖先。什么都没有改变。（为了避免被提出来，我确实尝试过更改s 和其他内容，只是为了确保我的更改正在进入页面。）5000-10positionz-indexpositionz-indexcolor

谢谢。

4

1 回答 1

5

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

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

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

<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

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

于 2013-05-09T22:39:12.490 回答