Question

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

http://jsfiddle.net/HYDKa/

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

请注意，“确定”按钮也会出现此错误;使用“取消”按钮更加明显。此外，IE 6和7中也存在此错误，但由于图像是Base64编码，因此我提供的演示无效。

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

这是一个jQuery错误吗？除了分割图像之外，还有什么可以解决的吗？我可以在IE中包含样式表＆lt; 9，但如果我不必，我宁愿不去。

谢谢！

Answer 1

旧的Internet Explorer版本不接受没有'px'的CSS值。 example = width：10px;

因此您需要在动画值的末尾添加+'px'。

Here is working 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);

Answer 2

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

我很欣赏barlasapaydin的时间以及阅读此内容的其他人的时间。谢谢！

jQuery：动画backgroundPosition在IE中表现奇怪＆lt; 9

2 个答案: