display:list-item은 IE7 및 IE6과 호환되지 않습니다.

오늘 펼치고 굴러가는 효과를 쓸 때 디스플레이:list-item이 IE7과 IE6을 호환하지 않는 것을 발견했습니다.
초기 코드:
$(document).ready(function(){
    $(".question_list li:not(.box_hide)").each(function(){
        $(this).click(function(){
            $(this).next(".box_hide").toggle();
            $(this).siblings("li").next(".box_hide").hide();
            $(this).children("a").css("color","#EC7302");
            var ptop=$(this).parent().offset().top;
            var ph=$(this).parent().height();
            var ttop=$(this).offset().top;
            var pstop=$(this).parent().scrollTop();
            var nh=$(this).next(".box_hide").height();
            if(($(this).next(".box_hide").css('display')=="list-item")&&((ptop+ph-ttop-nh-39)<0)){
                if(ph>nh+39){
                    var len=pstop-(ptop+ph-ttop-nh)+39;
                    $(this).parent().animate({scrollTop:len},"normal","linear",function(){});
                }else{
                    var len=pstop+(ttop-395);
                    $(this).parent().animate({scrollTop:len},"normal","linear",function(){});
                };
            }else if(($(this).next(".box_hide").css('display')=="list-item")&&((ttop-395)<0)){
                var len=pstop+(ttop-395);
                $(this).parent().animate({scrollTop:len},"normal","linear",function(){});
            };
        });
    });
});

수정된 코드:
$(document).ready(function(){
    $(".question_list li:not(.box_hide)").each(function(){
        $(this).click(function(){
            $(this).next(".box_hide").toggle();
            $(this).siblings("li").next(".box_hide").hide();
            $(this).children("a").css("color","#EC7302");
            var ptop=$(this).parent().offset().top;
            var ph=$(this).parent().height();
            var ttop=$(this).offset().top;
            var pstop=$(this).parent().scrollTop();
            var nh=$(this).next(".box_hide").height();
            if(($(this).next(".box_hide").css('display')!="none")&&((ptop+ph-ttop-nh-39)<0)){
                if(ph>nh+39){
                    var len=pstop-(ptop+ph-ttop-nh)+39;
                    $(this).parent().animate({scrollTop:len},"normal","linear",function(){});
                }else{
                    var len=pstop+(ttop-395);
                    $(this).parent().animate({scrollTop:len},"normal","linear",function(){});
                };
            }else if(($(this).next(".box_hide").css('display')!="none")&&((ttop-395)<0)){
                var len=pstop+(ttop-395);
                $(this).parent().animate({scrollTop:len},"normal","linear",function(){});
            };
        });
    });
});

상기 두 단락의 코드는 $(this)입니다.next(".box_hide").css('display') = "list-itme"및 $(this).next(".box_hide").css('display')!='none'이라는 두 문장의 차이.전자는 IE7 및 IE6과 호환되지 않습니다.
나는 이렇게 인쇄를 해야만 문제가list-item에서 나온다는 것을 알 수 있다.
나 var d=$(this).next(".box_hide").css('display'), 그리고alert(d)는 구글과 불여우에서list-item을 출력할 수 있지만 IE7에서는 Block만 출력할 수 있습니다. 이를 통해 알 수 있듯이 display:list-item은 IE7과 IE6를 호환하지 않기 때문에 코드를 조금만 바꾸면 제 효과가 모두 호환됩니다.

좋은 웹페이지 즐겨찾기