problème IE8 étrange lorsque vous utilisez .animate ({ « height »: « bascule »})

Question

Commander http://wouter.howafarms.com/faq

Le but est d'avoir des réponses être étendues en cliquant dessus.
Comme vous le verrez, cela fonctionne parfaitement dans tous les navigateurs sauf pour ie8.

J'ai essayé divers effets d'animation .slideDown(), .toggle() en vain. Ils fonctionnent toujours dans Firefox, Chrome et même IE7, mais jamais dans IE8. Qu'est-ce que dans le diable pourrait être en cause.

Voici le JavaScript:

$(document).ready(function() { 
$("#faq-list li").addClass('inactive'); 
$("#faq-list li").first('.inactive').toggleClass('inactive'); 
$("#faq-list li h2").toggle(
    function(){ 
     $(this).parent().find('.answer').animate({'height': 'toggle'},{queue:true,duration:300}) 
     $(this).toggleClass('inactive') 
    } , 
    function() { 
     $(this).parent().find('.answer').animate({'height': 'toggle'},{queue:true,duration:300}) 
     $(this).toggleClass('inactive') 
    }) 

})

Answer 1

Im ne sais pas pourquoi, mais display:inline sur votre élément h2 (la question) est la raison pour laquelle l'effondrement ne fonctionne pas correctement dans IE8. supprimer cela et vous êtes bien. suffit de relooker le « q » il lignes up

Answer 2

juste essayé ... ouais il est un peu bizarre .. peut-être IE8 est d'avoir un accident vasculaire cérébral avec le calcul de la hauteur.

Peut-être essayer slideDown/slideUp au lieu de .animate ({ 'height': 'bascule'}? Dans votre bascule

En outre, vous pouvez écrire les deux premières lignes:

$("#faq-list li").addClass('inactive'); 
$("#faq-list li").first('.inactive').toggleClass('inactive'); 

comme

$("#faq-list li:not(:first)").addClass('inactive');