Why, on IE 8, is jQuery slideToggle removing margins, but only when clicking on text?

I have an issue, this only happend in IE, defainatly 8 but haven't tested other versions. Everything works as expected in FF.

Here is the basics of the markup, the full issue can be found here :

    <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>

I have attatched some jquery event handlers to the sub headings to slide toggl开发者_如何学Pythone its sibling div on click. In IE (atleast 8) when clicking on a part of the div that does not contain text everything works as expected. When clicking on the text part e.g.:"A heading" the sibling div toggles open or closed but when closing the bottom margin of the parent div dissapears.

The problem is quite apparent in the demo fiddle

I am at a complete loss as to what is going on here. Ive tried adding width to the parent and toggled div to force hasLayout, but it is weird that the reults differ on depending on what was clicked.

One more piece to add to the puzzle, putting IE 8 into Compatability View does fix the problem but that is not a solution as I see it.

Hope someone out there can help.

Not sure about the cause or true solution, but when working with IE, overflow:hidden;/overflow:auto is my best friend. Adding one or the other to .EventsContainer seems to fix the issue.