Question

我的网站存在问题。我有一个导航垂直菜单，适用于所有浏览器。我将它设置为当您将鼠标悬停在图像上时，它会移动位置以显示悬停图像（如精灵）。但是，在兼容模式的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>

我对此很新，所以任何帮助都会非常感激。

Answer 1

无论你在哪里使用像......这样的背景。

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

添加不重复 ......

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

试试这个并告诉我它是否有帮助...

重新加载页面时，在IE中Sprite导航菜单渲染不正确

1 个答案: