Странная проблема IE8 при использовании .animate ({'height': 'toggle'})

Question

Оформить http://wouter.howafarms.com/faq

Цель состоит в том, чтобы развернуть ответы при нажатии.
Как вы увидите, это прекрасно работает во всех браузерах, кроме ie8.

Iпробовал различные эффекты анимации .slideDown (), .toggle () безрезультатно.Они всегда работают в Firefox, Chrome и даже в IE7, но никогда в IE8.Что, черт возьми, может быть причиной этого.

Вот код 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

Я не уверен, почему, но display:inline на вашем элементе h2 (вопрос) - почему коллапс не работает правильно в ie8. удалите это, и вы в порядке. просто нужно изменить стиль "q", чтобы он выстроился в линию

Answer 2

Только что попробовал ... да, это немного странно ... может быть, у IE8 есть штрих с вычислением высоты.

Возможно, попробуйте slideDown / slideUp вместо .animate ({'height': 'toggle'} в вашем переключателе?

Также вы можете написать первые две строки:

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

как

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