html - z-index を使用した Internet Explorer でのスタッキングの問題

Question

私は CSS が苦手なので、IE にメニュー バーを正しく表示させるのに苦労しています。このフィドルでわかるように、ユーザーがユーザー名をクリックしていくつかのオプションを表示できるシンプルなバーがあります。

このコードは、Chrome と Firefox では問題なく動作しますが、Internet Explorer では次のようになります。

ご覧のとおり、ナビゲーション バー内でメニューが開くため、最初のオプションのみが表示されます。

このフィドルを開いて、私のコードの何が問題なのか教えてもらえますか?

前もって感謝します！！

---

解決：

うわー、これは本当に奇妙ですが、CSS のこの行でした!! 例に単純な背景を置いたので、それがフィドルで機能する理由です。今後の参考のために、スタッキングが進行中の場合は絶対にこれを行わないでください。

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#282828',GradientType=0 ); /* IE6-9 */

Answer 1

I view the fiddle in Internet Explorer 9 and turn to IE 8 in development mode and I can see all the options. Not sure how to re-produce the bug you have.

Answer 2

position: relative親アイテムとドロップダウンに追加する必要がありますposition: absolute。topまた、#user_menu の属性を変更して、ユーザー名と重ならないようにする必要があるでしょう(約 20px 程度にする必要があります)。

IE のバグの詳細については、こちら を参照してください。

Answer 3

の CSS を#user_menu次のように変更します。

top: 30px;