jQuery - Internet Explorer 7 的兼容性问题和一般的错误行为答案

【问题标题】：jQuery - Compatibility Problem with Internet Explorer 7 and general buggy behaviourjQuery - Internet Explorer 7 的兼容性问题和一般的错误行为
【发布时间】：2009-02-09 14:45:51
【问题描述】：

我已经问过一些关于这个话题的问题，我已经做了一些用户建议的修改，但我仍然无法解决问题。我对 JavaScript 知之甚少，我只是从另一个页面修改了一段代码。

我有这段代码，当鼠标悬停在图像上时，它会动态地将 Div 向上滑动。您可以在此测试页面中查看：cine.uuuq.com

-在 Firefox 中完美运行。

-在 Chrome 中我得到了一些错误的行为。将鼠标悬停在 div 底部附近时，div 会向上滑动。

-在 Internet Explorer 7 中，一切都运行得很慢（有问题），而且 div 的位置也不合适。

jQuery：

jQuery.fn.masque = function(classSelector) {
$(this).hover(function(){
$(this).find(classSelector).stop().animate({height:'90px',opacity: '1'},400);
},function () {
$(this).find(classSelector).stop().animate({height:'0',opacity: '0'}, 300);
});
};
$(document).ready(function(){$('.thumb').masque('.masque');});

HTML：

<div class="thumb bg25">
    <a href="#"><img src="img/poster2.jpg" alt="Movie Title" /></a>
    <div class="masque">
            <h3 class="movietitle"><a href="#" >Movie Title</a></h3>
            <p class="movieinfo">2008</p>
            <p class="movieinfo">Drama, History, Comedy, Short</p>
    </div>
</div>

CSS：

.thumb {float:left; margin:0 14px 14px 0; width:126px; height:186px; padding:10px; position:relative;}

.masque {position:absolute; background:#212326; width:118px; bottom:10px; height:0; padding:4px; display:none;}

也许有人可以帮我解决这些兼容性问题！谢谢！

【问题讨论】：

标签： jquery cross-browser

【解决方案1】：

如果我将您在问题中引用的代码放入测试页面，它在 IE7 中对我来说可以正常工作，尽管您链接到的测试页面肯定会在 IE7 中向右推。

我建议从您的问题中提取代码并逐行重建测试站点的效果，直到您破坏它。这应该是问题出在哪里的一个相当公平的指示:)

【讨论】：

就像我说的那样，我主要是复制这段代码并对其进行了修改，所以我不太了解 jQuery，并且很难重新构建代码......无论如何，谢谢！