0

4.1.1 を実行している Galaxy Nexus の Chrome で奇妙なバグが見つかりました (古い Android ブラウザでは発生しません)。

ビューポート メタ タグ (下に貼り付けられたコンテンツ) を使用してテストを表示すると、z-index が高いため #container が #header の上に移動することが予想されますが、それよりも下になります。

<!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のバグです。これは多くのデバイス（4.0.4のMaxxを含む）で発生しますが、デバイスの完全なリストが何であるかはわかりません。

ただし、固定位置の影響を受けます。これによりサイトのレイアウトが変更されますが、ヘッダーをposition：absolute;に設定します。z-indexが尊重されることを保証します。

少なくともモバイルの場合、一部の古いiOSデバイスは、とにかく固定位置要素を常に尊重するとは限らないため、これを考慮する必要があります。

于 2012-09-11T18:10:03.813 に答える