javascript - Internet Explorer の Z-Index ポジショニングの問題 - コンテンツを押し下げる

Question

私は現在、父のために取り組んできたサイトのコーディングの過程にあり、恐ろしい IE の問題に遭遇しました。

ページの上部にスライダーがあり、上部に暗い透明のメニュー バーがあり、Z インデックスが適用されて前面に表示されます。PC 上の IE を除いて、すべてのブラウザで完全にレンダリングされます。

ページは次のように表示されます。

http://cl.ly/GOCC

泥棒の帽子の上部が透明なナビゲーション バーの下に表示されていることに注意してください。

ただし、IE では次のようにレンダリングされます。

http://cl.ly/GO6O

透明なナビゲーション div の下にスライダー イメージが押し下げられていることに注意してください (ここでも、帽子を防御ポイントとして使用しています)。

これを修正する方法について何か提案はありますか? 私は経験豊富なコーダーではなく、IE の修正も得意ではありません。インターウェブを検索しましたが、役に立ちませんでした... 助けて！

私のHTMLは次のとおりです。

<div class="navigation">
            <div class="container">
                <h1>Plymstock Security Systems</h1>
                <ul id="navigationlinks">
                    <li><a href="#">Products & Services</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Recent Projects</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>

        <div id="sliderarea">

            <div id="state1">

            </div>
            <img src="images/slider1.png" alt=""/>
        </div>

        <div class="contentarea">
        </div>

また、CSS は次のようになります。

.navigation {

position: relative;

z-index: 1991;

height: 140px;

background-repeat: repeat;
background-image: url(../images/navbgtrans.png);

}

.navigation h1 {
margin-left: -9px;
height: 140px;
width: 202px;
background-repeat: no-repeat;
background-image: url(../images/logo.png);
text-indent: -9999px;
}

ul#navigationlinks {
z-index: 0;
margin-top: -83px;
float: right;
list-style-type: none;
}

#navigationlinks li {
padding-left: 20px;
float: left;
}

#navigationlinks li a {
color: #bfbfbf;
font-size: 20px;
font-family: FreightSansBook;
text-decoration: none;
}

#navigationlinks li a:hover {
color: white;
}

#state1 {
background-image: url(../images/sliderbg1.png);
}

あなたが私に提供できる助けを前もって感謝します。