slideToggle 문제는 IE 7 (jQuery)

Question

해결 : 답변을 찾았습니다! CSS .over_meno li a{}에서 position:relative을 삭제하면 모든 것이 올바르게 작동합니다.

jQuery를 사용하여 토글 메뉴를 만들지 만 IE 7 텍스트에서는 div 상자 밖으로 나가고 텍스트 장식이 좋지 않습니다.

이 내 jQuery 코드입니다 :

$(document).ready(function() { 

    $(".boxer .header_cerve").click(function() { 
     var item = $(this).attr("title"); 
     if (item){ 
      $("#" + item + " .details").slideToggle("slow"); 
      $("#" + item + " .one_side").slideToggle("slow"); 
      } 
}); 
}); 

이 내 메뉴 HTML입니다 :

<div id="2" class="boxer"> 
<div title="2" class="header_cerve"> 
    <span class="right_corner"></span> 
    <span class="text">first menu</span> 
</div> 
<div class="details"> 
    <ul class="over_meno"> 
     <li><a href="sample.html"> <span>sample</span></a></li> 
     <li><a href="sample2.html"><span>sample2</span></a></li> 
    </ul> 
</div> 
<i style="" class="one_side"> 
    <i class="gr4"><i></i></i> 
    <i class="gr3"><i></i></i> 
    <i class="gr2"><i></i></i> 
    <i class="gr1"><i></i></i> 
</i></div> 

가 그 ID가 차이

입니다 몇 복서 사업부가 모든 복서가 하나 토글입니다 메뉴

CSS가 있지만 다소 복잡합니다 !! :

.boxer { 
    padding: 10px 10px 0; 
    border: 1px solid #D4D4D4; 
    border-bottom: 0px; 
    border-top: 0px; 
} 
.boxer .header { 
    background: transparent url(../image/boxser_css_or.gif) repeat-x scroll 0 0; 
    color: #FFFFFF; 
    direction: rtl; 
    font-family: "Times New Roman",Times,serif; 
    font-size: 14px; 
    font-weight: bold; 
    height: 34px; 
    line-height: 33px; 
    padding: 0 10px; 
    text-align: right; 
    border-left: 1px solid #D7D5D5; 
} 
.boxer .header_cerve { 
    background: transparent url(../image/boxser_css_or.gif) repeat-x scroll 0 0; 
    color: #FFFFFF; 
    direction: rtl; 
    font-family: "Times New Roman",Times,serif; 
    font-size: 14px; 
    font-weight: bold; 
    height: 32px; 
    line-height: 33px; 
    padding: 0px; 
    text-align: right; 
    cursor: pointer; 
} 
.boxer .header_cerve .text { 
    padding-right: 10px; 
    line-height: 30px; 
} 
.boxer .details { 
    color: #000000; 
    background: #ffffff; 
    direction: rtl; 
    padding: 7px 0px; 
    text-align: right; 
    border: 1px solid #D7D5D5; 
    border-bottom: 0px; 
} 
.boxer .icon { 
    background: url(../image/felfel.png) no-repeat; 
    width: 20px; 
    height: 21px; 
    float: left; 
    margin-top: 5px; 
} 
.boxer .details .left_corner { 
    background: url(../image/boxser_corner.gif) no-repeat 0px 0px; 
    width: 8px; 
    height: 7px; 
    float: left; 
} 
.boxer .header_cerve .right_corner { 
    background: url(../image/boxser_corner.gif) no-repeat -8px 0px; 
    width: 7px; 
    height: 7px; 
    float: right; 
} 
.boxer .header_cerve .left_corner { 
    background: url("../image/boxser_corner.gif") no-repeat scroll 0 bottom transparent; 
    width: 7px; 
    height: 32px; 
    float: left; 
} 
i.gr1, 
i.gr2, 
i.gr3, 
i.gr4 { 
    border-style: none solid; 
    border-width: 1px; 
    display: block; 
    height: 2px; 
    margin: 0 1px; 
    position: relative; 
    z-index: 30; 
} 
i.gr1 { 
    background: none repeat scroll 0 0 #D4D4D4; 
    border: 0 none; 
    height: 1px; 
    margin: 0 6px; 
} 
i.gr2, 
i.gr3, 
i.gr4 { 
    background: none repeat scroll 0 0 #ffffff; 
    border-color: #D4D4D4; 
} 
i.gr2 { 
    border-width: 2px; 
    height: 1px; 
    margin: 0 4px; 
} 
i.gr3 { 
    border-width: 2px; 
    height: 1px; 
    margin: 0 2px; 
} 

Answer 1

답변을 찾았습니다! 나는 위치를 삭제한다 : CSS로부터의 상대적 .over_meno li a {}, 이제 모든 것이 정확함