0

尝试将鼠标悬停在 Internet Explorer 8 中的“取消”按钮上：

http://jsfiddle.net/HYDKa/

您会注意到，当您第一次将鼠标悬停在它上面时，它会跳跃并且您可以看到“确定”按钮，但随后它会自行纠正。不过，随后的悬停功能正常。

请注意，“确定”按钮也会出现此错误；“取消”按钮更明显。此外，这个错误存在于 IE 6 和 7 中，但我提供的演示无法工作，因为图像是 Base64 编码的。

当然，该代码在非 IE 浏览器中运行良好。

这是一个 jQuery 错误吗？除了拆分图像之外，我还能做些什么来解决它？我可以包含一个 IE < 9 的样式表，但如果我不需要的话，我宁愿不要。

谢谢！

4

2 回答 2

0

阅读完这篇文章后，我最终通过将“backgroundPosition”更改为“background-position-x”来解决我的问题。此外，由于某些浏览器不支持“background-position-x”，我创建了 CSS3 转换来做同样的事情，然后将 JavaScript 代码包装在 if 语句中，以便它仅在浏览器不支持 CSS3 转换时运行. 我没有在我的网站上的其他任何地方使用特征检测，也不想为这么简单的事情打扰 Modernizr，所以我使用了这里显示的功能。我应该注意的另一件事是，我根本不需要打扰“sliding_link_original_background_position”变量。

我感谢 barlasapaydin 的时间以及其他阅读本文的人的时间。谢谢！

于 2012-07-17T16:22:46.427 回答
0

旧的 Internet Explorer 版本不接受没有 'px' 的 CSS 值。示例=宽度：10px；

所以你需要在动画值的末尾添加 + 'px' 。

这是工作的jsfiddle

    $(this).find('.sliding_link_image').animate({
        'backgroundPosition': (sliding_link_original_background_position + 10) + 'px'//<--here
    }, 150);
}, function() {
    $(this).find('.sliding_link_image').animate({
        'backgroundPosition': sliding_link_original_background_position + 'px'//<--and here
    }, 150);
于 2012-07-07T02:22:16.773 回答