jQuery UI Position IE 7의 유틸리티 동작

Question

최신 브라우저를 사용하기 위해 사이트를 업데이트하는 중입니다.하지만 IE7의 원시인을 지원해야합니다. jQuery UI의 위치 유틸리티 문제가 발생했습니다. 인터넷 익스플로러 11을 사용하여 IE7 (문서 모드 7)을 에뮬레이션하는 Windows 7 OS에서 이상한 동작이 발생합니다. IE 11 (문서 모드 7)을 에뮬레이션하는 IE 11을 사용하는 이상한 동작이 존재하지 않습니다.

IE7 (에뮬레이션되지 않음) 또는 문제가 발생한 테스터와 동일한 설정을 사용하여 문제가 발생하는지 확인해야합니다.

div의 오른쪽 상단에 누락 된 이미지 요소 위에 마우스를 올려 놓으면 문제가 발생합니다. 순서가 지정되지 않은 목록은 마우스를 올리면 한 번 나타나고 그 다음에는 아무 것도 나타나지 않습니다. 그 또는 호버는 결코 순서가없는 목록을 가져 오지 않습니다.

위에서 언급 한 작업 공간과 유사한 작업 공간이있는 경우 문제가 발생하는 곳입니다.

var hoverCollection = $('.current-menu-item'); 
    $.each(hoverCollection, function(index, object) { 
    $(object).hover(function() { 
     $(object.lastChild).position({ 
     my: "right top", 
     at: "bottom right", 
     of: object.parentElement, 
     collision: "flipfit" 
     }); 
    }); 
    }); 

https://jsfiddle.net/bpdxL1e6/

하드 그것의 목적은 호버에 뷰포트에 표시 순서없는 목록을 유지하기 위해 주로 같은 유틸리티 jsFiddle에서 전혀 작동되는 위치를 알려합니다.

필자의 데스크탑에 로컬 html 문서를 가지고 작업 위치의 효과를 볼 수 있습니다.

다음은 전체 html 파일 다운로드 링크입니다. http://www.filedropper.com/testhtmlfiddle

Answer 1

방금 ​​내 위치 지정 유틸리티를 작성했습니다. hoverCopter라고합니다. 다른 모든 최신 브라우저뿐만 아니라 IE7도 지원합니다.

var hoverCollection = $('.current-menu-item'); 
var hoveringCollection = []; 
$.each(hoverCollection, function(idx, object) { 
    hoveringCollection.push(object.lastChild); 
}); 
hoverCopter(hoverCollection, hoveringCollection); 


function hoverCopter(objectsToTriggerHover, objectsToHover) { 
    $.each(objectsToTriggerHover, function(idx, object) { 
    $(object).hover(function() { 
     var bool = true; 

     var objWidth = $(object).offset().left + $(objectsToHover[idx]).width(); 
     var winWidth = $(window).width() + $(window).scrollLeft(); 
     var objHeight = $(object).offset().top + $(objectsToHover[idx]).height(); 
     var winHeight = $(window).height() + $(window).scrollTop(); 

     if (objWidth > winWidth) { 
     var left = (objWidth - $(object).width()/2) - winWidth + (winWidth - $(object).offset().left); 
     $(objectsToHover[idx]).css({ 
      'left': -left + 'px' 
     }); 
     } else { 
     $(objectsToHover[idx]).css({ 
      'left': 0 + 'px' 
     }); 
     } 
     if (objHeight > winHeight) { 
     var top = (objHeight - $(object).height()/2) - winHeight + (winHeight - $(object).offset().top); 
     $(objectsToHover[idx]).css({ 
      'top': -top + 'px' 
     }); 
     bool = false; 
     } else { 
     $(objectsToHover[idx]).css({ 
      'top': 0 + 'px' 
     }); 
     } 

     // this is a zIndex hack for IE7 so that the ul display above the images 
     var elements = $('[name="homepart_nav_wrap"]'); 
     var int = 100; 
     $.each(elements, function(idx, object) { 
     if (bool == false) { 
      $(object).css("zIndex", idx); 
     } else { 
      $(object).css("zIndex", int); 
     } 
     int--; 
     }); 

    }); 
    }); 
} 

여기 jsFiddle이 있습니다. https://jsfiddle.net/bpdxL1e6/3/