html - 重新加载页面时，Sprite 导航菜单在 IE 中呈现不正确

Question

我的网站有问题。我有一个适用于所有浏览器的垂直导航菜单。我已将其设置为当您将鼠标悬停在图像上时，它会移动位置以显示悬停图像(如 Sprite )。但是，在 IE9 和兼容模式下的 IE9 中，当我单击其中一个链接并离开页面然后单击返回返回页面时，IE 将菜单中最后一项的悬停图像 Sprite 作为菜单中的第一张图片。只有当您单击该页面时，它才会自行更正。下面是 CSS。

    #nav{
clear:both;
float:left;
width:200px;
margin-right:20px;  
}

    /*.menu li{
height:28px;
overflow:hidden;
margin-bottom:10px;
    }
    .menu a:link{
position:relative;
top:0;
    }
    .menu a:hover{
    top: -28px; 
    }*/

   .menu {
   position:relative;

    margin-left:-10px;
    }
    .menu li{
    /*height:30px; 
    overflow:hidden;
    margin-bottom:10px;*/
    margin:10px;
    padding:0;
    list-style:none;
    top:0;
    }

   .menu li a{
    /*height:60px;*/
    display:block;
    }
   .btnPromodirect a{
     height:28px;
     width:200px;
     background:url('../links/promodirect_button.jpg') 200px 0;
    }
   .btnPromotionmag a{
    height:28px;
    width:200px;
    background:url('../links/promotionmagazine_button.jpg') 200px 0;
     }

    .btnPromota a{
     height:28px;
     width:200px;
      background:url('../links/promota_button.jpg') 200px 0;
     }
   .btnPpib a{
     height:28px;
     width:200px;
     background:url('../links/ppib_buton.jpg') 200px 0;
     }


   .btnPromodirect, .btnPromotionmag, .btnPromota, .btnPpib{
     border: none !important;
     outline: none !important;
    }
   .btnPromodirect a:hover, a:active{

     background:url('../links/promodirect_button.jpg') 0 -28px;
     }

    .btnPromotionmag a:hover, a:active{
     background:url('../links/promotionmagazine_button.jpg') 0 -28px;
    }

    .btnPromota a:hover, a:active{
     background:url('../links/promota_button.jpg') 0 -28px;
    }

    .btnPpib  a:hover, a:active{
    background:url('../links/ppib_buton.jpg') 0 -28px;
     }

下面是html

    <div id="nav">

     <ul class="menu">

     <li class="btnPromodirect"><a href="http://www.promodirect.com.au"></a></li>
     <li class="btnPromotionmag"><a href="http://www.promotionmagazine.com.au">       </a></li>
     <li class="btnPromota"><a href="http://www.promota.com.au"></a></li>
     <li class="btnPpib"><a href="http://www.ppib.com.au"></a></li>

     </ul>
     </div>

     </div>

我对此很陌生，所以非常感谢任何帮助。

Answer 1

无论你在哪里使用背景，比如..

background:url('../links/promodirect_button.jpg') 200px 0;

同时添加不重复...

background:url('../links/promodirect_button.jpg') 200px 0 no-repeat;

试试这个，如果有帮助请告诉我......