jQuery UI Accordion fail in IE8, IE9, and IE10

Question

Pretty strange bug here with jQuery UI Accordion....

Version Info

• Internet Explorer 8, 9, and 10 --> with "Compatibility View" turned on.
• jQuery UI 1.10.1
• jQuery Core 1.9.1

Problem Scenario

I have multiple separate accordions vertically stacked. When I click the header to collapse or expand the accordion on top, the elements below slide up and down like you would expect to make room for the appearing/disappearing content. However, the header for the accordion directly below stays hovering in place while everything else slides down. Looks really bad. When you hover your mouse cursor over this rogue floating header , it snaps back into place where it should have been.

Code

Hopefully I can put up a jsFiddle later, if/when my work unblocks the site (rolls eyes). For now, here is a simplified version of the code:

<script>
    $(document).ready(function ()
    {
        $(".accordion").accordion(
        {
            collapsible: true,
            active: 0,
            heightStyle: 'content',            
            icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
        });
    });
</script>
<style>
    .whitebackground { background-color: #FFF; }
    .contentDiv { height: 70px; background-color: lightblue; }
</style>
<div>    
    <div class="whitebackground">
        <table>
            <tr>
                <td>
                    <div class="accordion">
                        <h3>Accordion Header 1</h3>
                        <div>
                            <div class="contentDiv">
                                Some content here 1
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <div class="accordion">
                        <h3>Accordion Header 2</h3>
                        <div>
                            <div class="contentDiv">
                                Some content here 2
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

Reproduce Bug

To reproduce the bug, simply try to collapse the top accordion by clicking on the header, and you will immediately see the issue.

I have narrowed it down...

I have been able to narrow down the precise issue that is causing this. If you remove the whitebackground CSS class, the problem vanishes. Why in the world is this occurring? Does this seem like a bug to you guys?

Please Read This Last Part

Yes, I need to keep my HTML structure the way it is. I have greatly simplified it for this example while still maintaining the bug. Suffice it to say that I do indeed want to keep the TABLE element in place. No need to suggest removing it. And I need to have the DIV immediately containing the TABLE be able to specify a CSS background-color as well. Also, I cannot have users turn off "Compatibility View" in IE, because our AD group policy forces it on for everyone when accessing internal web apps.

Any ideas?

Answer 1

This seems to be caused by the position:relative css rule applied to the .ui-accordion-header. Commenting it out seems to fix the issue in IE compatibility mode.

.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    /*position: relative;*/
    margin-top: 2px;
    padding: .5em .5em .5em .7em;
    min-height: 0; /* support: IE7 */
}

However, this causes the header icons to show up in the wrong place. You'll have to tweak their css to compensate. There could be other side-effects as well.