html - ネストされた li スタイルが IE で機能しない。

Question

IE と FireFox のデザインに矛盾があります。

問題は、「li」グラデーションの背景にあります。コードは Firefox では正常に機能していますが、IE では正常に機能していません。コードを介して何をしようとしているのかを説明しようとします：

<li class="is-active">
    <ul>
        <li></li>
        <li class="is-active"></li>
        <li></li>
    </ul>
</li>

//For FireFox
li.is-active {
    background: -moz-linear-gradient(50% 0 , #E8E9E9, #FFFFFF 40px) repeat scroll 0 0 transparent;
    border-bottom: 1px solid #E0E0E0;
}
li li.is-active {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 0 none;
}

//For Internet Explorer
li.is-active {
    filter progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e8e9e9', endColorstr='#ffffff'); BACKGROUND-COLOR: #fff; _zoom: 1;
    border-bottom: #e0e0e0 1px solid;
}
li li.is-active {
    background: none transparent scroll repeat 0% 0%;
    border-bottom: 0px;
}

これでは、IE の li li.is-active が機能していません。li li.is-active の代わりに、li.is-active も実装されます。

これは望ましくありません。

私の問題を説明できたことを願っています。

この問題を解決するのに役立つ提案があれば教えてください。

よろしくお願いします。

ジーシャン

Answer 1

これを試してください

li li.is-active {
    background: none transparent scroll repeat 0% 0%;
    filter: none;
    border-bottom: 0px;
}

それがあなたの問題を解決することを願っています

Answer 2

私は JS Fiddle を作成しました。見て遊んでください。http://jsfiddle.net/Bf4CV/7/