jQuery 下一个/上一个按钮在 IE7 中不能正常工作

Question

我有以下 jQuery 代码:

jQuery(document).ready(function(){

    var list = jQuery('#content-list .mask ul').get(0);
    var mask = jQuery('#content-list .mask').get(0);
    var next = jQuery('#content-list .next').get(0);
    var previous = jQuery('#content-list .previous').get(0);

    var listHeight = parseInt(jQuery('#content-list').first().attr('listheight'));

    var isAnimating = false;
    var duration = 'slow';
    var easing = 'swing';
    var min = Math.floor(jQuery(list).innerHeight()/listHeight)*-listHeight;
    var max = 0;
    var current = 0;

    if(list) {

        jQuery(mask).height(listHeight-20);
        jQuery(previous).addClass('disabled');

        if (current <= min)
            jQuery(next).addClass('disabled');

        jQuery(next).bind('click', function(){
            var elements;
            var callback;
            if(!isAnimating) {

                isAnimating = true;

                current -= listHeight;
                if (current <= min) {
                    current = min;
                    jQuery(this).addClass('disabled');
                }

                if (current < max) {
                    jQuery(previous).removeClass('disabled');
                }

                callback = function() { 
                    isAnimating = false;
                }

                jQuery(list)
                .animate({'margin-top': current+'px'}, duration, easing, callback);
            }

            return false;

        });

        jQuery(previous).bind('click', function(){

            var elements;
            var callback;

            if(!isAnimating) {

                isAnimating = true;
                current += listHeight;

                if (current >= max) {
                    current = max;
                    jQuery(this).addClass('disabled');  
                }

                if (current > min) {
                    jQuery(next).removeClass('disabled');
                }

                callback = function() { 
                    isAnimating = false;
                }

                jQuery(list)
                .animate({'margin-top': current+'px'}, duration, easing, callback);
            }

            return false;

        });

    }

});

它在 Firefox 中运行良好但在 IE7 中失败...它没有很好地滚动，而是滚动了它应该滚动的大约 1/4 的距离，并且当我按下“下一步”按钮时事件似乎没有持续触发.

我怀疑这与我更改的一些 CSS 有关，因为这段代码之前可以正常工作...但我不确定从哪里开始。我使用 Firequery 查看了每个变量，在 Firefox 中至少它似乎给了我正确的测量值，并且“列表”等元素是我正在寻找的 HTML 元素...

Answer 1

我确实在一些帮助下完成了这项工作...事实证明我在我的 jQuery 中使用的一个选择器缺少 IE 的“hasLayout”，所以滚动没有被正确实现。

对我有用的东西:

• 使用 Javascript 警报来查看正在调用的内容和未调用的内容
• 尝试在 IE7 中似乎无法正常工作的选择器上使用“position: relative”
• 如果您的选择器没有“haveLayout”(应在 IE DEV 工具栏中读取 hasLayout: -1)，则尝试添加 zoom: 1