Question

我无法理解我发现在IE8和IE7中都能正常工作但在IE9中失败了。这是我正在处理的页面：[链接到网站] [1]。请注意，在IE9中，在侧边菜单上悬停链接时，浏览器会将背景重置为background-position: 0 0，并且只有在此应用之后，脚本才会将其设置为background-position: -20px 0（我希望它在第一个地点）。我做错了什么或有IE漏洞吗？还需要一些帮助来解决它。

这里是我正在向IE争吵的答案：

**

  $('#nav_bar li')
.css( {backgroundPositionX:"-224px",
       backgroundPositionY:"0px"} )
.mouseenter(function(){
    $(this).stop().animate(
        {backgroundPositionX:"-20px"}, 
        {duration:550})
    })

.mouseleave(function(){
    $(this).stop().animate(
        {backgroundPositionX:"-224px",
        backgroundPositionY:"0px"}, 
        {duration:550})
    })

感谢您的帮助！

[1]：

Answer 1

我可以建议以下仅限CSS的解决方案吗？

#nav_bar li {
    /* whatever you need for the background image */
    background-position: -224px 0;
    transition: background-position 0.55s ease;
    -webkit-transition: background-position 0.55s ease;
}
#nav_bar li:hover {
    background-position: -20px 0;
}

如果你真的希望它在IE9及以下版本中工作（因为它在IE10中运行良好），请尝试动画backgroundPosition本身，而不是其组件属性。

$("#nav_bar li")
 .css({backgroundPosition:"-224px 0"})
 .hover(
  function() {$(this).stop().animate({backgroundPosition:"-20px 0"},{duration:550});},
  function() {$(this).stop().animate({backgroundPosition:"-224px 0"},{duration:550});}
 );

IE 9在悬停时重置背景位置（IE bug？）

1 个答案: