0

在运行 4.1.1 的 Galaxy Nexus 上发现了一个奇怪的 Chrome 错误（在旧的 android 浏览器上不会发生）

如果您查看带有视口元标记的测试（内容粘贴在下面），您会期望 #container 移动到 #header 上方，因为它具有更高的 z-index 但它低于它。

<!DOCTYPE html>
<html>
<head>
    <title>Android Bug?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <style type="text/css">
        html, body { padding: 0; }
        #header {
            background: green;
            width: 100%;
            height: 230px;
            top: 0;
            left: 0;
            right: 0;
            position: fixed;
            z-index: 100;
        }
        #container {
            background: blue;
            padding: 500px 0;
            margin-bottom: 1000px;
            position: relative;
            z-index: 200;
            top: 230px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <div id="container"></div>
</body>
</html>

如果您删除视口元标记，那么它会按预期工作没有视口元标记的测试

有谁知道发生这种情况是有原因的，还是 Chrome/Android 中的错误？

4

1 回答 1

1

这是默认浏览器的 Android 错误。它发生在许多设备上（包括我的 Maxx 4.0.4），不确定设备的完整列表是什么。

它受固定位置的影响。虽然这会改变您网站的布局，但将标题设置为 position:absolute; 将确保尊重 z-index。

至少对于移动设备而言，一些较旧的 iOS 设备并不总是尊重固定位置元素，因此需要考虑这一点。

于 2012-09-11T18:10:03.813 回答