0

私はポートフォリオプロジェクトに取り組んでいます。相対的に配置されたdivに相対的に配置された画像があります。z-index を使用すると、この上に固定位置の div があり、その中に 3 つのフローティング div があり、それぞれに css で指定されたカーソル URL があります。これらはすべて別の div にあります。目的は、画像の表示を制御するために、画像の上に前、再生、および次のカーソルを表示することです。

Safari、Firefox、Chrome で問題なく動作します。IE (9,8 または 7) では機能しません。画像の上にカーソルが表示されません。どういうわけか、固定位置の div は画像の後ろに落ちていますが、z-index は上にあるはずだと言っています。

私はこれについて多くのことを読みました。スタッキング コンテキストを検討しましたが、私のコードでは問題ないと思います。固定された相対位置が異なるスタッキング コンテキストを作成している場合に備えて、すべてのオブジェクトが相対位置を持つようにすることを調査しました。これで解決しませんでした。癖と標準モードを調査しました。何も機能していないようです。

ここに私の問題のストリップバックされたサンプルページをアップロードしました:

http://bigflannel.com/portfolio/ie-test

どんな助けでも非常に感謝しています。私はデバッグに8時間かかり、立ち往生しています。

HTML

<div id ="website">

    <div id="media-panel">
        <img id="image0" class="image" src="http://bigflannel.com/portfolio/admin/albums/album-5/lg/fk01117.jpg">
    </div><!-- #media-panel -->

    <div id="navigation-panel">
        <div id="left-area"></div>
        <div id="play-pause-area"></div>
        <div id="right-area"></div>
    </div><!-- #navigation-panel -->

</div><!-- #website -->

CSS

#website {
    position: relative;
    z-index: 0;
}
#media-panel {
    position: relative;
    height: 600px;
    z-index: 1;
}
.image {
    position: relative;
    max-height: 600px;
    max-width: 600px;
    z-index: 0;
}
#navigation-panel {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 1500px;
    height: 900px;
}
#left-area {
    position: relative;
    float: left;
    cursor: url(http://bigflannel.com/development/mobileApp/bigflannel-portfolio/images/prevL.cur), auto;
    width: 500px;
    height: 900px;
}
#play-pause-area {
    position: relative;
    float: left;
    cursor: url(http://bigflannel.com/development/mobileApp/bigflannel-portfolio/images/playL.cur), auto;
    width: 500px;
    height: 900px;
}
#right-area {
    position: relative;
    float: left;
    cursor: url(http://bigflannel.com/development/mobileApp/bigflannel-portfolio/images/nextL.cur), auto;
    width: 500px;
    height: 900px;
}
4

1 に答える 1

1

残念ながら、IE はカーソルに関して非常にバグが多いです。これは、実際には z-index の問題ではありません。レイヤリングは期待どおりに機能しています。これは、#navigation-panel が画像の上を移動するときに背景色を設定することでテストできます。IEとカーソルの動作に関係しています。

解決策: (IE9 の場合)

/* Background with no opacity */
#navigation-panel {
    background: rgba(0, 0, 0, 0);
}

フィルターを使用して、以前のバージョンの IE で修正できる可能性があります。

于 2012-07-12T21:39:14.763 に答える