Question

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

如果您查看Test with viewport meta tag（下面粘贴的内容），您希望#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>

如果删除了视口元标记，则它会按预期工作Test without viewport meta tag

有没有人知道是否存在这种情况或是Chrome / Android中的错误？

Answer 1

这是一个默认broswer的Android错误。它出现在许多设备上（包括我的Maxx 4.0.4），不确定设备的完整列表是什么。

虽然受到固定位置的影响。虽然这会更改站点的布局，但将标题设置为position：absolute;将确保z-index得到尊重。

至少对于移动设备而言，一些较旧的iOS设备无论如何都不会始终尊重固定位置元素，因此需要考虑这些因素。

Chrome上的z-index问题（Android 4.1）

1 个答案: