Почему в IE 8 jQuery slideToggle убирает поля, но только при нажатии на текст?

Question

У меня есть проблема, это происходит только в IE, определенно 8, но я не тестировал другие версии. В FF все работает как положено.

Вот основы разметки, полный выпуск можно найти здесь :

    <div class="container"> 
         <div class="subHead">A Heading</div>
         <table>
             some table stuff
         </table>
    </div>

    <div class="container"> 
         <div class="subHead">Another Heading</div>
         <table>
             some table stuff
         </table>
    </div>

Я подключил некоторые обработчики событий jquery к подзаголовкам, чтобы скользить и переключать его родственный элемент div при нажатии. В IE (по крайней мере 8) при нажатии на часть div, которая не содержит текста, все работает как положено. При щелчке по текстовой части, например: «Заголовок», дочерний элемент div переключается в открытый или закрытый режим, но при закрытии нижнего поля родительского элемента div исчезает

Проблема весьма очевидна в демонстрационной скрипке

Я в полной растерянности относительно того, что здесь происходит. Я пытался добавить ширину к родителю и переключил div, чтобы вызвать hasLayout, но странно, что результаты различаются в зависимости от того, что было нажано.

Еще одна деталь, которую нужно добавить к загадке, - перевод IE 8 в Compatability View устраняет проблему, но, на мой взгляд, это не решение.

Надеюсь, кто-то там может помочь.

Answer 1

Не уверен насчет причины или истинного решения, но при работе с IE overflow:hidden;/overflow:auto - мой лучший друг. Добавление того или другого к .EventsContainer, похоже, решает проблему.