IE 7 (jQuery) 中的 SlideToggle 问题

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>

并且有几个 boxer div，这些 id 是不同的

每个 boxer 都是一个切换菜单

有 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{} 中删除了position:relative，现在一切都正确了