L'accordéon Jquery ne fonctionne pas correctement dans Internet Explorer

Question

J'ai créé un effet d'accordéon dans jquery avec css. Mon code est le suivant:

$('.acc_container').hide(); //Hide/close all containers 
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container 

//On Click 
$('.acc_trigger').click(function(e){ 

    if($(this).next().is(':hidden')) { //If immediate next container is closed... 
     $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container 
     $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container 
    } 
    e.stopPropagation(); 
    return false; //Prevent the browser jump to the link anchor 
}); 

Ci-dessous mon code html:

<h2 class="acc_trigger"> 
    <div class="i_left"></div> 
    <div class="i_mid"> <a href="#">General Information</a></div> 
    <div class="i_right"></div> 
</h2> 
<div class="acc_container"> 
    //some stuff 
</div> 

<h2 class="acc_trigger"> 
    <div class="i_left"></div> 
    <div class="i_mid"> <a href="#">Subset Criterion</a> </div> 
    <div class="i_right"></div> 
</h2> 
<div class="acc_container"> 
    //some stuff 
</div> 

Ci-dessous mon code css:

h2.acc_trigger 
    { 
    color:#0000000; 
    text-decoration:none; 
    padding: 0; 
    height:30px;  
    line-height: 0px; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:12px; 
    font-weight:bold; 
    float:left; 
    margin-top:0px; 
    width:100%; 
    margin-bottom:0px; 
    } 
h2.acc_trigger a 
{ color:#000000; 
    text-decoration:none; 
    position:relative; 
    top:12px; 
    padding:5px 5px 5px 20px; 
    background:url(../images/arrow_up.png) no-repeat scroll 0 6px transparent; 

    } 
h2.acc_trigger a:hover 
{ 
    color: #000; 
} 
h2.acc_trigger.active 
{ 
background:none; 
text-decoration:none; 
    margin:0px 0 5px 0px 

} 

h2.acc_trigger.active a 
    { 
    padding-left:20px; 
    position:relative; 
    top:12px; 
    background:url(../images/arrow_down.png) no-repeat scroll -1px 10px transparent; 
    color:#000000; 
    text-decoration:none; 
} 
.acc_container 
{ 
    margin: 0px 0px 8px 5px; 
    padding: 0; 
    overflow: hidden; 
    width: 91%; 
    clear: both; 
    -webkit-border-bottom-right-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
} 
.acc_container table td{ 
    font-size:11px; 
} 
.acc_container .block 
{ 
    padding: 20px; 
} 
.acc_container .block p 
{ 
    padding: 5px 0; 
    margin: 5px 0; 
} 
.acc_container h3 
{ 
    font: 2.5em normal Georgia, "Times New Roman", Times, serif; 
    margin: 0 0 10px; 
    padding: 0 0 5px 0; 
    border-bottom: 1px dashed #ccc; 
} 
.acc_container img 
{ 
    float: left; 
    margin: 10px 15px 15px 0; 
    padding: 5px; 
    background: #ddd; 
    border: 1px solid #ccc; 
} 

Il fonctionne tout à fait bien dans mozilla firefox, mais dans d'autres les navigateurs (IE) accrdion viennent avec un effet de bouillonnement et aussi un peu de chevauchement. S'il vous plaît aider.

Answer 1

eu le problème similaire, suivant fixe il:

 
$("#accordion").accordion({ autoHeight: false, 
             animated : false 
});