Question

在我的网站上，这些框应该淡入描述中。这适用于我尝试过的每个浏览器，除了IE10。这是一个WordPress网站，我使用九个插件。我已经尝试停用所有插件，但悬停仍然无法在IE10中运行。

以下是我用于悬停的代码：

jQuery(document).ready(function($){

$('.thumbnail').hover(function() {
  $('img', this).stop(true,true).fadeTo(100, 0.1);
  $('.description', this).stop(true,true).fadeIn(100);
}, function() {
  $('img', this).stop(true,true).fadeTo(100, 1);
  $('.description', this).stop(true,true).fadeOut(100);
});

});

有人可以帮我识别问题吗？如果我遗漏了任何重要信息，请告诉我。谢谢。

编辑：过滤/悬停的整个代码。

  // Filter
  $(function() {

    var time_effect = 1000;
    var effect_name = 'easeOutQuart';

    $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });

            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });

    $('.btn_all').click(function(e) {
      $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_identity').click(function(e) {
      $('.all').quicksand( $('.identity article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_web').click(function(e) {
      $('.all').quicksand( $('.web article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_illustration').click(function(e) {
      $('.all').quicksand( $('.illustration article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_print').click(function(e) {
      $('.all').quicksand( $('.print article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });
  });

Answer 1

这里的问题是浏览器嗅探代码;将Internet Explorer 10的用户代理字符串*更改为Chrome的用户代理字符串*，然后刷新浏览器。你会发现它运作得很好。

脚本正在利用$.browser.msie并假设Internet Explorer 10类似于Internet Explorer 7,8和9（它不是，它完全不同）。您的情况的罪魁祸首来自jQuery QuickSand。看看以下情况：

if ( $.browser.msie && $.browser.version.substr(0,1) < 7 ) {
    $sourceParent.html('').append($collection);
    return;
}

此测试仅检查版本号的第一个值，将错误地将Internet Explorer 10识别为版本＆＃34; 1＆＃34;，显然小于7，即受支持的版本。

这是固定的six months ago;来自GitHub的QuickSand的download the latest version。

更改Internet Explorer的用户代理字符串

按F12显示开发人员工具。选择工具＆gt;更改用户代理字符串以显示其他ua-string选项。选择＆＃34; Chrome＆＃34;，然后刷新浏览器以重新发出HTTP请求为＆＃34; Chrome＆＃34;。

Answer 2

您可以在代码运行时查看IE 10是否存在.thumbnail对象，方法是将其插入到当前.hover调用上方的行上：

console.log($('.thumbnail').length);

如果这记录了0，那么这将解释为什么悬停事件处理程序永远不会被连接起来。无论出于何种原因，IE 10认为这些元素在代码运行时尚不存在。这是绑定可能更好的事件的另一种方法：

jQuery(document).ready(function($){

    $(document.body)
        .on('mouseenter', '.thumbnail', function() {
            $('img', this).stop(true,true).fadeTo(100, 0.1);
            $('.description', this).stop(true,true).fadeIn(100);
        })
        .on('mouseleave', '.thumbnail', function() {
            $('img', this).stop(true,true).fadeTo(100, 1);
            $('.description', this).stop(true,true).fadeOut(100);
        });

});

这样做是为了设置一对全局事件处理程序，它们仅适用于具有“thumbnail”类名的元素，无论这些代码首次运行时是否存在这些元素。如果问题是IE 10中的时间问题，这可能会解决它。

jQuery盘旋在IE10中不起作用，但适用于较低的IE版本

2 个答案:

更改Internet Explorer的用户代理字符串