IE中的嵌套樣式重寫了我在CSS精靈上的相同名稱

Question

我有一些CSS精靈在您將鼠標懸停在它們上方時更改圖像。然後，我有一些jQuery，如果您將鼠標移到它上面（從而更改背景圖像）並將其淡入淡出，則會向該元素添加一個類。這是因爲希望在懸停圖像之間進行平滑過渡，而不是一個圖像之間的直線切割到另一個。

在Chrome和Firefox中，翻轉和淡入效果都能正常工作。但是，在IE中，具有相同名稱的最後一個樣式會應用於具有不正確背景圖像的元素。

對於下面的示例#main a.style2.active是爲style1顯示的背景圖像。我假設這是因爲最後一個「積極」類是IE所提供的。

如何重構我的樣式，以便style1獲取應用於它的#main a.style1.active背景圖像？

<style media="screen"> 
    #main{ 
     width: 985px; 
     height: 600px; 
     background: url(../img/my.jpg); 
     margin: 0px; 
     padding: 0; 
     position: absolute; 
    } 
    #main li { 
     margin: 0; 
     padding: 0; 
     list-style: none; 
    } 

    #main a.style1 { left: 0px; width: 337px; top: 0px; height: 600px; position: absolute; } 
    #main a.style1.active { background: url(../img/my.jpg) -0px -600px; } 

    #main a.style2 { left: 337px; width: 330px; top: 0px; height: 600px; position: absolute; } 
    #main a.style2.active { background: url(../img/my.jpg) -337px -600px; } 
    </style> 

    <script> 
    $(document).ready(function(){ 

     $('.elem').mouseenter(function(){ 
      if ($(this).is(':animated')){ 
       $(this).stop(); 
      } 
      $(this).hide().addClass('active').fadeTo(750,1); 
     }); 

     $('.elem').mouseleave(function(){ 
      if ($(this).is(':animated')){ 
       $(this).stop(); 
      } 
      $(this).fadeTo(750, 0, function(){ 
       $(this).removeClass('active').css({'filter' : 'none', 'display' : 'block'}); 
      }); 
     }); 

}); 
    </script> 

    <ul id="main"> 
     <li><a class="elem style1" href="#"></a></li> 
     <li><a class="elem style2" href="#"></a></li> 
    </ul> 

Answer 1

我覺得這樣的事情應該工作：

#main a.style1 { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 337px; 
    height: 600px; 
    background-position: -0px -600px; 
} 

#main a.style2 { 
    position: absolute; 
    top: 0px; 
    left: 337px; 
    width: 330px; 
    height: 600px; 
    background-position: -337px -600px; 
} 

#main a.active { 
    background-image: url(../img/my.jpg); 
}