0

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

我对此相当陌生，因此将不胜感激任何帮助。

4

1 回答 1

0

无论您在哪里使用背景，例如..

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

也添加不重复...

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

试试这个，让我知道它是否有帮助......

于 2012-11-22T03:47:52.000 回答